import { useContainersByWagon, useUnassignContainer } from '@/hooks/useContainers';
import { Button } from '@/components/ui/button';
import { Trash2 } from 'lucide-react';
import type { Container } from '@/services/containerService';

export function ContainersTable({ wagonId }: { wagonId: string }) {
  const { data: containers, refetch } = useContainersByWagon(wagonId);
  const unassign = useUnassignContainer();

  if (!containers?.length) return <div className="text-muted-foreground">No containers assigned.</div>;

  return (
    <table className="w-full table-fixed">
      <thead>
        <tr>
          <th className="text-left">Number</th>
          <th className="text-left">Type</th>
          <th className="text-left">Position</th>
          <th className="text-left">Status</th>
          <th className="text-left">Actions</th>
        </tr>
      </thead>
      <tbody>
        {containers.map((container: Container) => (
          <tr key={container.id}>
            <td className="py-2">{container.containerNumber}</td>
            <td className="py-2">{container.containerTypeId}</td>
            <td className="py-2">{container.position}</td>
            <td className="py-2">{container.status}</td>
            <td className="py-2">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => unassign.mutateAsync(container.id).then(() => refetch())}
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}