"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

function Table({ className, ...props }: React.ComponentProps<"table">) {
  return (
    /* The container controls the overall height. 
       'overflow-auto' allows the vertical scrollbar to appear only here.
    */
    <div
      data-slot="table-container"
      className="relative w-full overflow-auto rounded-md border border-[#e9e9e97d] max-h-[500px] bg-white dark:bg-secondary dark:border-[#2c2c2c]"
    >
      <table
        data-slot="table"
        className={cn("w-full caption-bottom text-sm border-separate border-spacing-0", className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
  return (
    /* 'sticky top-0' pins the header to the top of the 'table-container'.
       'z-20' keeps it above the body rows.
    */
    <thead
      data-slot="table-header"
      className={cn(
        "sticky top-0 z-20 bg-[#f8f8f8] dark:bg-[#282828]  shadow-[0_1px_0_rgba(0,0,0,0.1)]",
        className
      )}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
  return (
    <tbody
      data-slot="table-body"
      className={cn("relative", className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
  return (
    /* 'sticky bottom-0' pins the footer to the bottom of the container. */
    <tfoot
      data-slot="table-footer"
      className={cn(
        "sticky bottom-0 z-20 bg-white dark:bg-secondary border-t font-medium shadow-[0_-1px_0_rgba(0,0,0,0.1)]",
        className
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors bg-white dark:bg-secondary dark:hover:bg-gray-800",
        className
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<"th">) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        "text-foreground h-10 p-2 text-left align-middle font-semibold whitespace-nowrap border-b",
        className
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        "p-2 align-middle whitespace-nowrap border-b",
        className
      )}
      {...props}
    />
  )
}

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