import { useWagons } from '@/hooks/useWagons';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Card, CardContent, CardHeader, CardTitle } from '@edr/ui-common';


export default function WagonsPage() {
  const { data: wagons, isLoading } = useWagons();
  if (isLoading) return <div>Loading wagons...</div>;
  return (
    <Card>
      <CardHeader><CardTitle>All Wagons</CardTitle></CardHeader>
      <CardContent>
        <Table>
          <TableHeader><TableRow><TableHead>Number</TableHead><TableHead>Type</TableHead><TableHead>Train</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
          <TableBody>
            {wagons?.map((w:any) => (
              <TableRow key={w.id}>
                <TableCell>{w.wagonNumber}</TableCell>
                <TableCell>{w.wagonTypeId}</TableCell>
                <TableCell>{w.trainId || 'Unassigned'}</TableCell>
                <TableCell><Badge variant="outline">{w.status}</Badge></TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}