import * as React from "react";

import { cn } from "@/lib/utils";

const Table: FCC<React.ComponentProps<"table">> = ({
  className,
  ...props
}) => (
  <div className="relative h-full w-full overflow-auto overflow-x-hidden">
    <table
      className={cn("h-full w-full caption-bottom text-sm", className)}
      {...props}
    />
  </div>
);
Table.displayName = "Table";

const TableHeader: FCC<React.ComponentProps<"thead">> = ({
  className,
  ...props
}) => <thead className={cn("[&_tr]:border-b", className)} {...props} />;
TableHeader.displayName = "TableHeader";

const TableBody: FCC<React.ComponentProps<"tbody">> = ({
  className,
  ...props
}) => <tbody className={className} {...props} />;
TableBody.displayName = "TableBody";

const TableFooter: FCC<React.ComponentProps<"tfoot">> = ({
  className,
  ...props
}) => (
  <tfoot
    className={cn(
      "border-t bg-neutral-100/50 font-medium dark:bg-neutral-800/50 [&>tr]:last:border-b-0",
      className,
    )}
    {...props}
  />
);
TableFooter.displayName = "TableFooter";

const TableRow: FCC<React.ComponentProps<"tr">> = ({
  className,
  ...props
}) => (
  <tr
    className={cn(
      "border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800",
      className,
    )}
    {...props}
  />
);
TableRow.displayName = "TableRow";

const TableHead: FCC<React.ComponentProps<"th">> = ({
  className,
  ...props
}) => (
  <th
    className={cn(
      "h-10 px-2 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
      className,
    )}
    {...props}
  />
);
TableHead.displayName = "TableHead";

const TableCell: FCC<React.ComponentProps<"td">> = ({
  className,
  ...props
}) => (
  <td
    className={cn(
      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
      className,
    )}
    {...props}
  />
);
TableCell.displayName = "TableCell";

const TableCaption: FCC<React.ComponentProps<"caption">> = ({
  className,
  ...props
}) => (
  <caption
    className={cn(
      "mt-4 text-sm text-neutral-500 dark:text-neutral-400",
      className,
    )}
    {...props}
  />
);
TableCaption.displayName = "TableCaption";

export {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
};