Table

"use client";

import * as React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;

type InvoiceRow = {
  id: string;
  customer: string;
  plan: string;
  amount: string;
  status: string;
  detail: string;
};

const rows: InvoiceRow[] = [
  {
    id: "inv_1042",
    customer: "Northwind Labs",
    plan: "Pro Annual",
    amount: "$169.00",
    status: "Paid",
    detail: "Renewed automatically on May 12. Receipt sent to billing@northwind.dev.",
  },
  {
    id: "inv_1041",
    customer: "Studio Meridian",
    plan: "Teams",
    amount: "Custom",
    status: "Pending",
    detail: "Awaiting PO approval from procurement. Sales follow-up scheduled.",
  },
  {
    id: "inv_1040",
    customer: "Orbit Systems",
    plan: "Pro Lifetime",
    amount: "$199.00",
    status: "Paid",
    detail: "Lifetime license issued. CLI access enabled immediately.",
  },
];

function PreviewPanel({
  title,
  children,
  className,
}: {
  title: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn(wensityCardSurfaceClass, "w-full max-w-2xl p-4 sm:p-5", className)}>
      <p className="mb-4 text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
        {title}
      </p>
      {children}
    </div>
  );
}

export function TablePreview() {
  return (
    <PreviewPanel title="Recent invoices">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Customer</TableHead>
            <TableHead>Plan</TableHead>
            <TableHead>Amount</TableHead>
            <TableHead>Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <TableCell className="font-medium">{row.customer}</TableCell>
              <TableCell>{row.plan}</TableCell>
              <TableCell>{row.amount}</TableCell>
              <TableCell>{row.status}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </PreviewPanel>
  );
}

export default function Demo() {
  return <TablePreview />;
}