import { clx } from '../helpers/utils'
import Button from './Button'
import book from '../assets/images/books.jpg'
import { FC } from 'react'
import { Link } from 'react-router-dom'
import { Pages } from '../config/Pages'
type Props = {
    image: string;
    title: string;
    time: string;
    teacher: string;
    price: string;
}

const CourseCard: FC<Props> = (props: Props) => {
    const cardClass = clx(
        'w-full bg-white rounded-lg overflow-hidden'
    );
    return (
        <div
            {...props} className={`${cardClass}`}
        >
            <img className='h-[92px] w-full' src={book} alt="" />
            <div className='mt-1 p-2 text-xs space-y-3'>
                <div className='flex justify-between items-center '>
                    <p>{props.title}</p>
                    <p>{props.price} تومان</p>
                </div>
                <div className='text-description font-extralight space-y-2'>
                    <p>{props.time} ساعت آموزش</p>
                    <p>مدرس : {props.teacher}</p>
                </div>
                <Link
                    to={Pages.courses.detail + '123'}>
                    <Button
                        label='ثبت نام' className='mt-4 h-7 text-[10px] rounded-[8px]' />
                </Link>
            </div>
        </div>
    )
}

export default CourseCard