import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Train } from '@/services/trainService';

export function TrainDetailCard({ train }: { train: Train }) {
  return (
    <Card>
      <CardHeader><CardTitle>{train.trainNumber || train.code} - {train.trainName || 'Unnamed'}</CardTitle></CardHeader>
      <CardContent className="grid md:grid-cols-2 gap-4">
        <div><span className="font-medium">Status:</span> {train.status}</div>
        <div><span className="font-medium">Capacity:</span> {train.capacityTons} tons</div>
        <div><span className="font-medium">Origin:</span> {train.originStationId || '-'}</div>
        <div><span className="font-medium">Destination:</span> {train.destinationStationId || '-'}</div>
        <div><span className="font-medium">Departure:</span> {train.departureTime ? new Date(train.departureTime).toLocaleString() : '-'}</div>
        <div><span className="font-medium">Arrival:</span> {train.arrivalTime ? new Date(train.arrivalTime).toLocaleString() : '-'}</div>
        {train.remarks && <div className="col-span-2"><span className="font-medium">Remarks:</span> {train.remarks}</div>}
      </CardContent>
    </Card>
  );
}