"use client"

import * as React from "react"
import { type ColumnDef } from "@tanstack/react-table"
import { Button } from "@/registry/ui/button"
import { Badge } from "@/registry/ui/badge"
import { EntityTable } from "@/registry/blocks/entity-table/entity-table"

interface Service {
  name: string
  category: string
  status: "active" | "draft"
}

const data: Service[] = [
  { name: "Business registration", category: "Company", status: "active" },
  { name: "Tax identification", category: "Tax", status: "active" },
  { name: "Import permit", category: "Trade", status: "draft" },
  { name: "Work visa", category: "Immigration", status: "active" },
  { name: "Land title transfer", category: "Property", status: "draft" },
]

const columns: ColumnDef<Service, unknown>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "category", header: "Category" },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <Badge variant={row.original.status === "active" ? "secondary" : "outline"}>
        {row.original.status}
      </Badge>
    ),
  },
]

export default function EntityTableDemo() {
  return (
    <EntityTable
      columns={columns}
      data={data}
      searchAccessor={(row) => row.name}
      searchPlaceholder="Search services…"
      createSlot={<Button size="sm">New service</Button>}
      onEdit={() => {}}
      onDelete={() => {}}
    />
  )
}

Name	Category	Status
Business registration	Company	active
Tax identification	Tax	active
Import permit	Trade	draft
Work visa	Immigration	active
Land title transfer	Property	draft