'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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHome } from '@fortawesome/free-solid-svg-icons'

export default function BerryDashGameInfo () {
  return (
    <div className='box text-center'>
      <div className='relative'>
        <Link href='/' className='home-button absolute -top-4 -left-4'>
          <FontAwesomeIcon icon={faHome} />
        </Link>
      </div>
      <p className='text-4xl'>Berry Dash</p>
      <p>
        Berry Dash is the first game Lncvrt ever made in Unity. The game is a
        simple but also complex game at the same time.
      </p>
      <p>
        Berry Dash has a Leaderboard System, Account System, Profiles, Icon
        marketplace, chatroom, custom mode, and more.
      </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-[960px] w-[calc(100vw-64px)]'
      >
        <SwiperSlide>
          <Image
            src={
              'https://cdn-r2.lncvrt.xyz/games/screenshots/berry-dash/home.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src={
              'cdn-r2.lncvrt.xyz/games/screenshots/berry-dash/mode-select.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src={
              'https://cdn-r2.lncvrt.xyz/games/screenshots/berry-dash/playing.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src={
              'https://cdn-r2.lncvrt.xyz/games/screenshots/berry-dash/custom.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src={
              'https://cdn-r2.lncvrt.xyz/games/screenshots/berry-dash/stats.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src={
              'cdn-r2.lncvrt.xyz/games/screenshots/berry-dash/leaderboards.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src={
              'https://cdn-r2.lncvrt.xyz/games/screenshots/berry-dash/chatroom.png'
            }
            width={960}
            height={540}
            alt=''
          />
        </SwiperSlide>
      </Swiper>
      <p className='text-2xl mt-4 mb-1'>Downloads</p>
      <div className='downloads'>
        <Link
          href='https://archive.org/download/berry-dash-archive/Berry-Dash-1.8.2-android.apk'
          draggable={false}
        >
          Android
        </Link>
        <Link
          href='https://archive.org/download/berry-dash-archive/Berry-Dash-1.8.2-ios.ipa'
          draggable={false}
        >
          iOS
        </Link>
        <Link href='/download' draggable={false}>
          Windows, macOS, or Linux
        </Link>
      </div>
    </div>
  )
}