import Table from "@/packages/ui/src/_components/table/Table";
import type { ITableColumn } from "@/packages/ui/src/_components/table/Table.type";


const rows: UserRow[] = [
  { id: "u_1", name: "Luis", email: "luis@cssnt.dev", role: "Admin", status: "Active", createdAt: "2025-12-15", requests: 1420 },
  { id: "u_2", name: "Andrea", email: "andrea@cssnt.dev", role: "Editor", status: "Paused", createdAt: "2025-11-02", requests: 210 },
];

const columns = [
  { key: "name", header: "Name" },
  { key: "email", header: "Email", mono: true },
  { key: "role", header: "Role" },
  { key: "status", header: "Status" },
  { key: "createdAt", header: "Created", mono: true },
  { key: "requests", header: "Requests", align: "right", mono: true, width: 120 },
];

export default function Example() {
  return (
    <Table<UserRow>
      caption="Team"
      columns={columns}
      rows={rows}
      rowKey={(r) => r.id}
      renderCell={(row, col) => (col.key === "requests" ? row.requests.toLocaleString() : row[col.key])}
    />
  );
}

import Table from "@/packages/ui/src/_components/table/Table";

export default function Example({ columns, rows }: any) {
  return (
    <Table
      caption="Striped + dense + colDividers"
      variant="primary"
      density="dense"
      striped
      colDividers
      columns={columns}
      rows={rows}
    />
  );
}

import Table from "@/packages/ui/src/_components/table/Table";

export default function Example({ columns, rows }: any) {
  return (
    <div style={{ maxHeight: 220, overflow: "auto" }}>
      <Table
        caption="Sticky header (scroll)"
        stickyHeader
        variant="secondary"
        columns={columns}
        rows={rows}
        rowKey={(r: any, i: number) => r.id + "-" + i}
      />
    </div>
  );
}

import Table from "@/_components/table/Table";

export default function Example({ columns, rows }: any) {
  return (
    <>
      <Table caption="Inverse" variant="neutral-inverse" columns={columns} rows={rows} />
      <Table caption="Pure white" tone="pure-white" columns={columns} rows={rows} />
      <Table caption="Pure black" tone="pure-black" variant="neutral-inverse" columns={columns} rows={rows} />
    </>
  );
}

import Table from "@/packages/ui/src/_components/table/Table";

export default function Example({ columns }: any) {
  return <Table caption="Empty table" columns={columns} rows={[]} emptyText="No users yet" />;
}

"use client";

import { useState } from "react";
import Table from "@/packages/ui/src/_components/table/Table";

export default function Example({ columns, rows }: any) {
  const [selectedId, setSelectedId] = useState("u_2");

  return (
    <Table
      caption="Selectable rows (click)"
      variant="info"
      columns={columns}
      rows={rows}
      rowKey={(r: any) => r.id}
      isRowSelected={(r: any) => r.id === selectedId}
      renderCell={(row: any, col: any) => {
        if (col.key === "name") {
          return (
            <button type="button" style={{ all: "unset", cursor: "pointer" }} onClick={() => setSelectedId(row.id)}>
              {row.name}
            </button>
          );
        }
        return row[col.key];
      }}
    />
  );
}

import Table from "@/packages/ui/src/_components/table/Table";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";

export default function Example({ columns, rows }: any) {
  return (
    <Table
      caption="Actions column"
      variant="success"
      columns={[...columns, { key: "id", header: "Actions", align: "right", width: 220 }]}
      rows={rows}
      rowKey={(r: any) => r.id}
      renderCell={(row: any, col: any) => {
        if (col.key !== "id") return row[col.key];

        return (
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
            <Button variant="transparent" variantRadio="sm" onClick={() => console.log("view", row.id)}>
              View
            </Button>
            <Button variant="primary" variantRadio="sm" onClick={() => console.log("edit", row.id)}>
              Edit
            </Button>
          </div>
        );
      }}
    />
  );
}

import Table from "@/packages/ui/src/_components/table/Table";

export default function Example({ columns, rows }: any) {
  return (
    <Table
      caption="Custom cell rendering"
      variant="tertiary"
      columns={columns}
      rows={rows}
      renderCell={(row: any, col: any) => {
        if (col.key === "email") return <a href={`mailto:${row.email}`}>{row.email}</a>;
        if (col.key === "requests") return Number(row.requests).toLocaleString();
        return row[col.key];
      }}
    />
  );
}