Table

"use client";

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

// Table components with composition pattern
export function Table({ className, children, ...props }) {
  return (
    <div className="w-full overflow-auto">
      <table className={cn("w-full caption-bottom text-sm", className)} {...props}>
        {children}
      </table>
    </div>
  );
}

export function TableHeader({ className, ...props }) {
  return (
    <thead
      className={cn(
        "border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50",
        className
      )}
      {...props}
    />
  );
}

export function TableBody({ className, ...props }) {
  return <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
}

export function TableRow({ className, ...props }) {
  return (
    <tr
      className={cn(
        "border-b border-zinc-200 dark:border-zinc-800 transition-colors",
        "hover:bg-zinc-50 dark:hover:bg-zinc-900/50",
        className
      )}
      {...props}
    />
  );
}

export function TableHead({ className, children, ...props }) {
  return (
    <th
      className={cn(
        "h-10 px-4 text-left align-middle font-medium text-zinc-500 dark:text-zinc-400 text-sm",
        className
      )}
      {...props}
    >
      {children}
    </th>
  );
}

export function TableCell({ className, ...props }) {
  return (
    <td
      className={cn("p-4 align-middle text-zinc-900 dark:text-zinc-100 text-sm", className)}
      {...props}
    />
  );
}