"use client"

import * as React from "react"
import { type ColumnDef } from "@tanstack/react-table"
import { DataTable } from "@/registry/ui/data-table"

interface Ticket {
  title: string
  status: string
  priority: string
}

const mockData: Ticket[] = [
  { title: "Fix login redirect", status: "OPEN", priority: "High" },
  { title: "Update invoice template", status: "IN_PROGRESS", priority: "Medium" },
  { title: "Translate onboarding", status: "OPEN", priority: "Low" },
  { title: "Rotate API keys", status: "DONE", priority: "High" },
  { title: "Archive old records", status: "DONE", priority: "Low" },
  { title: "Audit permissions", status: "IN_PROGRESS", priority: "High" },
]

const STATUS_LABELS: Record<string, string> = {
  OPEN: "Open",
  IN_PROGRESS: "In progress",
  DONE: "Done",
}

const columns: ColumnDef<Ticket>[] = [
  { accessorKey: "title", header: "Title" },
  {
    accessorKey: "status",
    header: "Status",
    filterFn: "arrIncludesSome",
    cell: ({ row }) => STATUS_LABELS[row.original.status],
  },
  {
    accessorKey: "priority",
    header: "Priority",
    filterFn: "arrIncludesSome",
  },
]

export default function DataTableFacetedFilterDemo() {
  return (
    <DataTable
      columns={columns}
      data={mockData}
      facets={[
        {
          columnId: "status",
          title: "Status",
          options: Object.entries(STATUS_LABELS).map(([value, label]) => ({
            value,
            label,
          })),
        },
        {
          columnId: "priority",
          title: "Priority",
          options: ["High", "Medium", "Low"].map((p) => ({
            value: p,
            label: p,
          })),
        },
      ]}
    />
  )
}

Title	Status	Priority
Fix login redirect	Open	High
Update invoice template	In progress	Medium
Translate onboarding	Open	Low
Rotate API keys	Done	High
Archive old records	Done	Low
Audit permissions	In progress	High

data-table-faceted-filter