import { type FC } from 'react'
import Td from '../../../components/Td'
import { Calendar, Edit, Play } from 'iconsax-react'
import StatusWithText from '../../../components/StatusWithText'
import type { Learning as LearningType } from '../types/Types'
import { useDeleteLearning } from '../hooks/useSellerData'
import TrashWithConfrim from '@/components/TrashWithConfrim'

interface Props {
    learning: LearningType
    onEdit: (learning: LearningType) => void
}

const LearningTableRow: FC<Props> = ({ learning, onEdit }) => {
    const { mutate: deleteLearningMutation, isPending } = useDeleteLearning()
    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="w-12 h-12 rounded-lg overflow-hidden">
                    <img
                        src={learning.cover || '/placeholder-image.png'}
                        alt={learning.title}
                        className="w-full h-full object-cover"
                    />
                </div>
            </Td>
            <Td text="">
                <div className="max-w-xs">
                    <div className="font-medium text-gray-900 truncate">
                        {learning.title}
                    </div>
                    <div className="text-gray-500 text-xs truncate max-w-xs">
                        {learning.description}
                    </div>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-1">
                    <Play size={16} color="#8C90A3" />
                    <span className="text-gray-600 text-sm">
                        ویدیو
                    </span>
                </div>
            </Td>
            <Td text={learning.category.title} />
            <Td text="">
                <StatusWithText
                    variant={learning.deleted ? 'error' : 'success'}
                    text={learning.deleted ? 'غیرفعال' : 'فعال'}
                />
            </Td>
            <Td text="">
                <div className="flex items-center gap-2">
                    <Calendar size={16} color="#8C90A3" />
                    <span className="text-gray-600 text-sm">
                        {formatDate(learning.createdAt)}
                    </span>
                </div>
            </Td>
            <Td text="">
                <div className="flex gap-2 items-center">
                    <Edit
                        onClick={() => onEdit(learning)}
                        color="#8C90A3"
                        size={18}
                        className="cursor-pointer hover:text-blue-500"
                    />
                    <TrashWithConfrim
                        onDelete={() => deleteLearningMutation(learning._id)}
                        isLoading={isPending}
                    />
                </div>
            </Td>
        </tr>
    )
}

export default LearningTableRow
