import React from 'react';
import type { Ticket } from '@/types/Ticket';
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
import { StatusBadge } from '@/components/ui/StatusBadge';

interface TicketInfoWidgetProps {
  ticket: Ticket;
}

export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) => {
  return (
    <Card>
      <CardHeader>
        <div className="space-y-2">
          <div className="flex items-center space-x-3">
            <span className="text-xs font-bold uppercase tracking-wider px-2.5 py-1 bg-slate-200 text-slate-700 rounded-md">
              {ticket.category}
            </span>
            <span className="text-xs font-mono text-slate-400">ID: {ticket.id}</span>
          </div>
          <h1 className="text-xl font-bold text-slate-900 leading-snug">{ticket.subject}</h1>
          <p className="text-xs text-slate-500 font-medium">
            Créé le {new Date(ticket.created).toLocaleString('fr-FR')}
          </p>
        </div>
        
        <StatusBadge status={ticket.status} className="shrink-0 max-w-fit" />
      </CardHeader>
      
      <CardContent>
        <p className="text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">
          Description du besoin :
        </p>
        <div className="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">
          {ticket.description}
        </div>
      </CardContent>
    </Card>
  );
};