import { type FC } from 'react'
import Td from '../../../components/Td'
import { Calendar, Edit } from 'iconsax-react'
import StatusWithText from '../../../components/StatusWithText'
import type { LearningCategory } from '../types/Types'

interface Props {
    category: LearningCategory
    onEdit: (category: LearningCategory) => void
}

const CategoryLearningTableRow: FC<Props> = ({ category, onEdit }) => {
    const formatDate = (dateString: string) => {
        return new Date(dateString).toLocaleDateString('fa-IR', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        })
    }

    return (
        <tr className='tr'>
            <Td text="">
                <div className="max-w-xs">
                    <div className="font-medium text-gray-900 truncate">
                        {category.title}
                    </div>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-2">
                    <Calendar size={16} color="#8C90A3" />
                    <span className="text-gray-600 text-sm">
                        {formatDate(category.createdAt)}
                    </span>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-2">
                    <Calendar size={16} color="#8C90A3" />
                    <span className="text-gray-600 text-sm">
                        {formatDate(category.updatedAt)}
                    </span>
                </div>
            </Td>
            <Td text="">
                <StatusWithText
                    variant={category.deleted ? 'error' : 'success'}
                    text={category.deleted ? 'غیرفعال' : 'فعال'}
                />
            </Td>
            <Td text="">
                <div className="flex gap-2">
                    <Edit onClick={() => onEdit(category)} color="#8C90A3" size={16} />
                </div>
            </Td>
        </tr>
    )
}

export default CategoryLearningTableRow
