import Image from 'next/image'
import Link from 'next/link'
import { Metadata } from 'next'
import { DiscordButton } from './components/DiscordButton'
import { AccountButton } from './components/AccountButton'

export const metadata: Metadata = {
  title: 'Lncvrt Games - Home',
  description: 'A collection of games made by Lncvrt and others'
}

export default function Home () {
  return (
    <div className='box'>
      <AccountButton />
      <DiscordButton />
      <p className='text-center text-4xl'>Lncvrt Games</p>
      <p className='text-center text-[18px] mb-4'>
        A collection of games made by Lncvrt and others
      </p>
      <p className='text-center text-xl mt-2'>Main Games</p>
      <div className='games-grid'>
        <Link href='/game/berry-dash' draggable={false}>
          <Image
            src={'https://games-r2.lncvrt.xyz/icons/berry-dash.png'}
            width={64}
            height={64}
            draggable={false}
            alt=''
          />
          <span>Berry Dash</span>
        </Link>
        <Link href='/game/triangles' draggable={false}>
          <Image
            src={'https://games-r2.lncvrt.xyz/icons/triangles.png'}
            width={64}
            height={64}
            draggable={false}
            alt=''
          />
          <span>Triangles</span>
        </Link>
      </div>
      <p className='text-center text-xl mt-2'>Spinoffs</p>
      <div className='games-grid'>
        <Link href='/game/berry-dash-lite' draggable={false}>
          <Image
            src={'https://games-r2.lncvrt.xyz/icons/berry-dash-lite.png'}
            width={64}
            height={64}
            draggable={false}
            alt=''
          />
          <span>Berry Dash Lite</span>
        </Link>
        <Link href='/game/berry-dash-with-guns' draggable={false}>
          <Image
            src={'https://games-r2.lncvrt.xyz/icons/berry-dash-with-guns.png'}
            width={64}
            height={64}
            draggable={false}
            alt=''
          />
          <span>Berry Dash with Guns</span>
        </Link>
      </div>
      <p className='text-center text-xl mt-2'>
        Non-official but Verified games
      </p>
      <div className='games-grid'>
        <Link href='/game/berry-dash-custom' draggable={false}>
          <Image
            src={'https://games-r2.lncvrt.xyz/icons/berry-dash-custom.png'}
            width={64}
            height={64}
            draggable={false}
            alt=''
          />
          <span>Berry Dash Custom</span>
        </Link>
        <Link href='/game/berry-dash-godot-remake' draggable={false}>
          <Image
            src={
              'https://games-r2.lncvrt.xyz/icons/berry-dash-godot-remake.png'
            }
            width={64}
            height={64}
            draggable={false}
            alt=''
          />
          <span>Berry Dash Godot Remake</span>
        </Link>
        <Link href='/game/berry-dash-with-guns-custom' draggable={false}>
          <Image
            src={
              'https://games-r2.lncvrt.xyz/icons/berry-dash-with-guns-custom.png'
            }
            width={64}
            height={64}
            draggable={false}
            alt=''
          />
          <span>Berry Dash with Guns Custom</span>
        </Link>
        <Link href='/game/berry-dash-ultimate' draggable={false}>
          <Image
            src={'https://games-r2.lncvrt.xyz/icons/berry-dash-ultimate.png'}
            width={64}
            height={64}
            draggable={false}
            alt=''
          />
          <span>Berry Dash Ultimate</span>
        </Link>
      </div>
      <p className='text-2xl mt-4 mb-1 text-center'>
        Looking for launcher downloads?
      </p>
      <div className='downloads'>
        <Link href='/download' draggable={false}>
          Download for Windows, macOS, or Linux
        </Link>
      </div>
    </div>
  )
}