import {
  Trove,
  TroveContent,
  TroveHeader,
  TroveTitle,
  TroveDescription,
  TroveActions,
  TroveExpandAllButton,
  TroveCollapseAllButton,
} from "@/components/ui/trove";
import {
  useReactTable,
  getCoreRowModel,
  ColumnDef,
} from "@tanstack/react-table";

type User = {
  id: string;
  name: string;
  email: string;
  bio: string;
};

const users: User[] = [
  {
    id: "1",
    name: "Alice",
    email: "alice@example.com",
    bio: "Alice is a software engineer.",
  },
  {
    id: "2",
    name: "Bob",
    email: "bob@example.com",
    bio: "Bob is a product manager.",
  },
  {
    id: "3",
    name: "Charlie",
    email: "charlie@example.com",
    bio: "Charlie is a designer.",
  },
];

const columns: ColumnDef<User>[] = [
  {
    accessorKey: "name",
    header: "Name",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
];

export function UserTable() {
  const table = useReactTable({
    data: users,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <Trove
      table={table}
      getRowId={(row) => row.id}
      renderExpanded={(row) => (
        <TroveContent>
          <p>{row.original.bio}</p>
        </TroveContent>
      )}
    >
      <TroveHeader>
        <TroveTitle>Users</TroveTitle>
        <TroveDescription>A list of users in the system.</TroveDescription>
      </TroveHeader>
      <TroveActions>
        <TroveExpandAllButton />
        <TroveCollapseAllButton />
      </TroveActions>
    </Trove>
  );
}