import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Edit, Trash } from "lucide-react";

import { ShippingMethod } from "@/lib/types";

interface ShippingTableProps {
  shippingMethods: ShippingMethod[];
  loading: boolean;
  onEditShipping: (method: ShippingMethod) => void;
  onDeleteShipping: (_id: string) => void;
}

export const ShippingTable: React.FC<ShippingTableProps> = ({
  shippingMethods,
  loading,
  onEditShipping,
  onDeleteShipping,
}) => {
  return (
    <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
      <Table className="relative">
        <TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
          <TableRow className="hover:bg-transparent">
            <TableHead className="w-[60%]">Name</TableHead>
            <TableHead className="text-center">Price</TableHead>
            <TableHead className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {loading ? (
            <TableRow>
              <TableCell colSpan={3} className="text-center">
                <Skeleton className="h-4 w-[200px]" />
              </TableCell>
            </TableRow>
          ) : shippingMethods.length > 0 ? (
            shippingMethods.map((method) => (
              <TableRow
                key={method._id}
                className="transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/70"
              >
                <TableCell className="font-medium">{method.name}</TableCell>
                <TableCell className="text-center">£{method.price}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end">
                    <Button
                      size="sm"
                      variant="ghost"
                      className="text-blue-600 hover:text-blue-700 dark:text-blue-400"
                      onClick={() => onEditShipping(method)}
                    >
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="text-red-600 hover:text-red-700 dark:text-red-400"
                      onClick={() => onDeleteShipping(method._id ?? "")}
                    >
                      <Trash className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={3} className="h-24 text-center">
                No shipping methods found
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
};