'use client';

import React from 'react';
import { StatusBadge } from '@/components/ui/StatusBadge';
import { TicketPrizeDisplay } from '@/components/ui/TicketPrizeDisplay';
import { Ticket } from '@/types';

interface TicketTableRowProps {
  ticket: Ticket;
  showClaimedDate?: boolean;
}

export const TicketTableRow: React.FC<TicketTableRowProps> = ({
  ticket,
  showClaimedDate = false,
}) => {
  return (
    <tr className="hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors">
      <td className="px-6 py-4 whitespace-nowrap">
        <span className="font-mono text-sm font-semibold text-[#5a5a4e]">
          {ticket.code}
        </span>
      </td>
      <td className="px-6 py-4">
        {ticket.prize && (
          <TicketPrizeDisplay prizeType={ticket.prize.type} />
        )}
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
        <StatusBadge type="ticket" value={ticket.status} />
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
        {ticket.playedAt
          ? new Date(ticket.playedAt).toLocaleDateString("fr-FR", showClaimedDate ? {
              day: 'numeric',
              month: 'long',
              year: 'numeric',
              hour: '2-digit',
              minute: '2-digit',
            } : undefined)
          : "-"}
      </td>
      {showClaimedDate && (
        <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
          {ticket.claimedAt
            ? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", {
                day: 'numeric',
                month: 'long',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
              })
            : "-"}
        </td>
      )}
    </tr>
  );
};

export default TicketTableRow;