'use client'
import { ArrowLeft, Play } from 'iconsax-react'
import { type FC } from 'react'
import { useRouter } from 'next/navigation'
import Seperator from '@/components/utils/Seperator'
import Image from 'next/image'

const GamePage: FC = () => {

    const router = useRouter()

    return (
        <div>
            <div className='grid grid-cols-3 items-center py-4'>
                <div className='w-6'></div>
                <h1 className='text-sm2 place-self-center font-medium'>بازی و سرگرمی</h1>
                <ArrowLeft
                    className='cursor-pointer place-self-end'
                    size='24'
                    color='currentColor'
                    onClick={() => router.back()}
                />
            </div>

            <div className='mt-11 relative bg-primary text-white h-[120px] rounded-[10px] p-4'>
                <div className='max-w-[99px]'>
                    <div className='font-bold'>My Games</div>
                    <div className='mt-1'>
                        <Seperator className='w-7' />
                    </div>

                    <div className='text-xs mt-3 leading-5 font-medium'>
                        تا سفارشت آماده بشه بازی کن
                    </div>
                </div>

                <Image
                    src='/assets/images/controller.png'
                    alt='game preview'
                    width={195}
                    height={131}
                    className='absolute left-2 bottom-2'
                />
            </div>

            <div className='mt-8 flex flex-col gap-4'>
                <div
                    style={{ direction: 'ltr' }}
                    className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
                    onClick={() => {
                        const currentPath = window.location.pathname
                        const basePath = currentPath.split('/game')[0]
                        router.push(`${basePath}/game/2048`)
                    }}
                >
                    <div className='flex gap-3 items-center'>
                        <Image
                            src='/assets/images/2048_logo.png'
                            alt='2048'
                            width={80}
                            height={80}
                            className='size-[80px] object-cover'
                        />

                        <div className='text-sm font-bold max-w-[92px]'>
                            2048
                        </div>
                    </div>

                    <div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
                        <div className='text-xs'>اجرا کنید</div>
                        <Play size='20' color='currentColor' />
                    </div>

                </div>

                <div
                    style={{ direction: 'ltr' }}
                    className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
                    onClick={() => {
                        const currentPath = window.location.pathname
                        const basePath = currentPath.split('/game')[0]
                        router.push(`${basePath}/game/tower-builder`)
                    }}
                >
                    <div className='flex gap-3 items-center'>
                        <Image
                            src='/assets/images/tower_building_logo.webp'
                            alt='Tower Builder'
                            width={80}
                            height={80}
                            className='size-[80px] object-cover'
                        />

                        <div className='text-sm font-bold max-w-[92px]'>
                            Tower Builder
                        </div>
                    </div>

                    <div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
                        <div className='text-xs'>اجرا کنید</div>
                        <Play size='20' color='currentColor' />
                    </div>

                </div>

                <div
                    style={{ direction: 'ltr' }}
                    className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
                    onClick={() => {
                        const currentPath = window.location.pathname
                        const basePath = currentPath.split('/game')[0]
                        router.push(`${basePath}/game/the-cube`)
                    }}
                >
                    <div className='flex gap-3 items-center'>
                        <Image
                            src='/assets/images/cube_logo.jpeg'
                            alt='The Cube'
                            width={80}
                            height={80}
                            className='size-[80px] object-cover'
                        />

                        <div className='text-sm font-bold max-w-[92px]'>
                            The Cube
                        </div>
                    </div>

                    <div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
                        <div className='text-xs'>اجرا کنید</div>
                        <Play size='20' color='currentColor' />
                    </div>

                </div>
            </div>
        </div>
    )
}

export default GamePage