import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Select from '../../components/Select'
import Input from '../../components/Input'
import LevelingCart from '../../components/LevelingCard'
import germanyFly from '../../assets/images/germany.png'
import CourseCard from '../../components/CourseCard'
import book from '../../assets/images/books.jpg'
const AdmitCard: FC = () => {
    const { t } = useTranslation('global')
    return (
        <div className='mt-4 min-h-[500px]'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('myCourses.myCourses')}
                </div>
            </div>
            <div>
                <div className='flex justify-between items-end gap-2 xl:items-end'>
                    <div className='mt-6 xl:mt-0 max-w-[420px] xl:w-[300px] w-full'>
                        <Input
                            variant='search'
                            placeholder={t('myCourses.search')}
                            className='bg-white w-full'
                        />
                    </div>
                    <div className='flex items-center gap-4'>
                        <div className='w-[100px] xl:w-[200px]'>
                            <Select
                                items={[
                                    {
                                        label: 'همه',
                                        value: 'active'
                                    }
                                ]}
                                className='bg-white border'
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div className='flex overflow-auto gap-4 mt-8 hide-scroll-bar'>
                <LevelingCart
                    image={germanyFly}
                    title='سطح A1'
                />
            </div>
            <div className='mt-6 pb-[120px]'>
                <h2>{t('myCourses.myCourses')}</h2>
                <div className='flex flex-wrap gap-2 mt-2'>
                    <div className='min-w-[40%] flex-1 lg:min-w-[175px]'>
                        <CourseCard
                            image={book}
                            teacher='حمید ضرغامی'
                            time='20'
                            price='1.000.000'
                            title='دوره 504 واژه'
                        />
                    </div>
                    <div className='min-w-[40%] flex-1 lg:min-w-[175px]'>
                        <CourseCard
                            image={book}
                            teacher='حمید ضرغامی'
                            time='20'
                            price='1.000.000'
                            title='دوره 504 واژه'
                        />
                    </div>
                    <div className='min-w-[40%] flex-1 lg:min-w-[175px]'>
                        <CourseCard
                            image={book}
                            teacher='حمید ضرغامی'
                            time='20'
                            price='1.000.000'
                            title='دوره 504 واژه'
                        />
                    </div>
                    <div className='min-w-[40%] flex-1 lg:min-w-[175px]'>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default AdmitCard