Table

const data = [
  {
    "id": 1,
    "name": "iPhone 15",
    "price": 999,
    "status": "Active",
    "category": "Electronics",
    "stock": 50,
    "description": "Latest smartphone with advanced camera system"
  },
  {
    "id": 2,
    "name": "MacBook Air",
    "price": 1299,
    "status": "Active",
    "category": "Electronics",
    "stock": 25,
    "description": "Lightweight laptop perfect for professionals"
  },
  {
    "id": 3,
    "name": "Nike Air Max",
    "price": 120,
    "status": "Active",
    "category": "Footwear",
    "stock": 100,
    "description": "Comfortable running shoes for daily use"
  },
  {
    "id": 4,
    "name": "Samsung TV",
    "price": 799,
    "status": "Inactive",
    "category": "Electronics",
    "stock": 15,
    "description": "55-inch 4K Smart TV with HDR support"
  },
  {
    "id": 5,
    "name": "Adidas Hoodie",
    "price": 80,
    "status": "Active",
    "category": "Clothing",
    "stock": 75,
    "description": "Comfortable cotton blend hoodie"
  }
];

export const BasicTableExample = () => {
  const [products, setProducts] = React.useState<Product[]>(data);

  const columns: Column<Product>[] = [
    {
      key: "name",
      title: "Product",
      sortable: true,
      render: (row: Product) => (
        <span className="font-medium">{row.name}</span>
      ),
    },
    {
      key: "price", 
      title: "Price",
      sortable: true,
      render: (row: Product) => (
        <span className="font-mono">${row.price}</span>
      ),
    },
    {
      key: "status",
      title: "Status", 
      sortable: true,
      render: (row: Product) => (
        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
          row.status === "Active" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
        }`}>
          {row.status}
        </span>
      ),
    },
  ];

  const rowActions: RowAction<Product>[] = [
    {
      label: "View",
      icon: <Eye size={16} />,
      onClick: (row: Product) => console.log("View:", row.name),
    },
    {
      label: "Edit",
      icon: <Edit size={16} />, 
      onClick: (row: Product) => console.log("Edit:", row.name),
    },
    {
      label: "Delete",
      icon: <Trash2 size={16} />,
      onClick: (row: Product) => console.log("Delete:", row.name),
      disabled: (row: Product) => row.status === "Inactive",
    },
  ];

  return (
    <Table.Root
      data={products}
      columns={columns}
      selectable={true}
      showSearch={true}
      showExport={true}
      rowActions={rowActions}
      onRowSelect={(selectedRows, row, isSelected) => {
        console.log("Selected:", selectedRows.length);
      }}
    >
      <Table.Toolbar>
        <Button size="sm" className="flex items-center gap-2">
          <Plus size={16} />
          Add Product
        </Button>
      </Table.Toolbar>

      <Table.Container>
        <Table.Header>
          <Table.Row>
            <Table.SelectHeader />
            {columns.map((column) => (
              <Table.Head key={column.key as string} column={column}>
                {column.title}
              </Table.Head>
            ))}
            <Table.ActionsHeader />
          </Table.Row>
        </Table.Header>
        <Table.Body />
      </Table.Container>

      <Table.Pagination />
    </Table.Root>
  );
};

const data = [
  {
    "id": 1,
    "name": "Sarah Johnson",
    "email": "sarah@company.com",
    "role": "Manager",
    "department": "Engineering",
    "phone": "555-0101",
    "location": "New York",
    "joinDate": "2020-01-15"
  },
  {
    "id": 2,
    "name": "Mike Chen",
    "email": "mike@company.com",
    "role": "Developer",
    "department": "Engineering",
    "phone": "555-0102",
    "location": "San Francisco",
    "joinDate": "2021-03-10"
  },
  {
    "id": 3,
    "name": "Emma Wilson",
    "email": "emma@company.com",
    "role": "Designer",
    "department": "Design",
    "phone": "555-0103",
    "location": "Austin",
    "joinDate": "2021-07-22"
  },
  {
    "id": 4,
    "name": "David Kim",
    "email": "david@company.com",
    "role": "Analyst",
    "department": "Sales",
    "phone": "555-0104",
    "location": "Seattle",
    "joinDate": "2020-11-05"
  },
  {
    "id": 5,
    "name": "Lisa Wang",
    "email": "lisa@company.com",
    "role": "Developer",
    "department": "Engineering",
    "phone": "555-0105",
    "location": "Boston",
    "joinDate": "2022-02-14"
  }
];

export const ExpandableTableExample = () => {
  const [users, setUsers] = React.useState<User[]>(data);

  const columns: Column<User>[] = [
    {
      key: "name",
      title: "Name", 
      sortable: true,
      render: (row: User) => (
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground text-sm font-medium">
            {row.name.split(" ").map(n => n[0]).join("")}
          </div>
          <span className="font-medium">{row.name}</span>
        </div>
      ),
    },
    {
      key: "email",
      title: "Email",
      sortable: true,
    },
    {
      key: "role", 
      title: "Role",
      sortable: true,
      filterable: true,
    },
  ];

  const rowActions: RowAction<User>[] = [
    {
      label: "View",
      icon: <Eye size={16} />,
      onClick: (row: User) => console.log("View:", row.name),
    },
    {
      label: "Edit",
      icon: <Edit size={16} />,
      onClick: (row: User) => console.log("Edit:", row.name),
    },
  ];

  return (
    <Table.Root
      data={users}
      columns={columns}
      expandable={true}
      selectable={true}  
      showSearch={true}
      rowActions={rowActions}
    >
      <Table.Toolbar>
        <Button size="sm" className="flex items-center gap-2">
          <Plus size={16} />
          Add User
        </Button>
      </Table.Toolbar>

      <Table.Container>
        <Table.Header>
          <Table.Row>
            <Table.SelectHeader />
            <Table.ExpandHeader />
            {columns.map((column) => (
              <Table.Head key={column.key as string} column={column}>
                {column.title}
              </Table.Head>
            ))}
            <Table.ActionsHeader />
          </Table.Row>
        </Table.Header>
        
        <Table.Body
          renderExpandedRow={(row: User) => (
            <div className="p-4 space-y-2">
              <h4 className="font-semibold">Details for {row.name}</h4>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div><strong>Department:</strong> {row.department}</div>
                <div><strong>Phone:</strong> {row.phone}</div>
                <div><strong>Location:</strong> {row.location}</div>
                <div><strong>Join Date:</strong> {row.joinDate}</div>
              </div>
            </div>
          )}
        />
      </Table.Container>

      <Table.Pagination />
    </Table.Root>
  );
};