'use client'

import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Keyboard } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import Link from 'next/link'
import { useEffect } from 'react'
import { HomeButton } from '@/app/components/HomeButton'
import { DiscordButton } from '@/app/components/DiscordButton'

export default function BerryDashWithGunsCustomGameInfo () {
  useEffect(() => {
    document.title = 'Lncvrt Games - Berry Dash with Guns Custom'
  }, [])

  return (
    <div className='box text-center'>
      <HomeButton />
      <DiscordButton />
      <p className='text-4xl'>Berry Dash with Guns Custom</p>
      <p>
        Berry Dash with Guns Custom is similar to Berry Dash with Guns, but with
        a second player added and more!
      </p>
      <p>
        The game does not contain any gore and is simply a pixel gun and pixel
        bullet.
      </p>
      <p className='text-2xl mt-4 mb-1'>Screenshots</p>
      <Swiper
        modules={[Keyboard, Navigation]}
        navigation
        keyboard={{ enabled: true }}
        className='screenshots-gallery mx-auto max-w-240 w-[calc(100vw-64px)]'
      >
        <SwiperSlide>
          <Image
            src={
              'https://games-r2.lncvrt.xyz/screenshots/berry-dash-with-guns-custom/playing-1.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src={
              'https://games-r2.lncvrt.xyz/screenshots/berry-dash-with-guns-custom/playing-2.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src={
              'https://games-r2.lncvrt.xyz/screenshots/berry-dash-with-guns-custom/stats.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
      </Swiper>
      <p className='text-2xl mt-4 mb-1'>Downloads</p>
      <div className='downloads'>
        <Link href='/download' draggable={false}>
          Windows, macOS, or Linux
        </Link>
      </div>
    </div>
  )
}