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

export default function ContainersPage() {
  const { data: containers, isLoading } = useContainers();
  if (isLoading) return <div>Loading containers...</div>;
  return (
    <Card>
      <CardHeader><CardTitle>All Containers</CardTitle></CardHeader>
      <CardContent>
        <Table>
          <TableHeader><TableRow><TableHead>Number</TableHead><TableHead>Type</TableHead><TableHead>Wagon</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
          <TableBody>
            {containers?.map((c:any) => (
              <TableRow key={c.id}>
                <TableCell>{c.containerNumber}</TableCell>
                <TableCell>{c.containerTypeId}</TableCell>
                <TableCell>{c.wagonId || 'Unassigned'}</TableCell>
                <TableCell><Badge variant="outline">{c.status}</Badge></TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}