データテーブルDataTableExperimental

import type { ColumnDef } from "@tanstack/react-table"
import { Badge, DataTable, type DataTableLabels } from "@gunjo/ui"

type Member = {
  id: string
  name: string
  role: "owner" | "admin" | "member"
  status: "active" | "invited" | "suspended"
  joinedAt: string
}

const members: Member[] = [
  { id: "1", name: "青井 花", role: "owner", status: "active", joinedAt: "2024-01-15" },
  { id: "2", name: "田中 空", role: "admin", status: "active", joinedAt: "2024-03-08" },
  { id: "3", name: "山本 優", role: "member", status: "invited", joinedAt: "2025-04-22" },
  { id: "4", name: "小林 真央", role: "member", status: "active", joinedAt: "2024-06-30" },
  { id: "5", name: "中村 蓮", role: "admin", status: "suspended", joinedAt: "2024-11-04" },
  { id: "6", name: "佐藤 葵", role: "member", status: "active", joinedAt: "2025-02-12" },
  { id: "7", name: "鈴木 凛", role: "member", status: "active", joinedAt: "2025-06-18" },
  { id: "8", name: "高橋 海", role: "member", status: "invited", joinedAt: "2025-08-01" },
  { id: "9", name: "伊藤 碧", role: "admin", status: "active", joinedAt: "2025-09-20" },
  { id: "10", name: "渡辺 陽", role: "member", status: "suspended", joinedAt: "2025-10-11" },
  { id: "11", name: "加藤 澪", role: "member", status: "active", joinedAt: "2025-12-03" },
  { id: "12", name: "森 七海", role: "member", status: "active", joinedAt: "2026-01-09" },
  { id: "13", name: "石井 悠", role: "admin", status: "active", joinedAt: "2026-02-14" },
  { id: "14", name: "清水 旭", role: "member", status: "invited", joinedAt: "2026-03-07" },
  { id: "15", name: "林 彩", role: "member", status: "active", joinedAt: "2026-04-16" },
  { id: "16", name: "井上 湊", role: "member", status: "suspended", joinedAt: "2026-05-02" },
  { id: "17", name: "木村 詩", role: "member", status: "active", joinedAt: "2026-05-10" },
  { id: "18", name: "斎藤 光", role: "member", status: "active", joinedAt: "2026-05-21" },
]

const roleLabels: Record<Member["role"], string> = {
  owner: "所有者",
  admin: "管理者",
  member: "メンバー",
}

const statusLabels: Record<Member["status"], string> = {
  active: "有効",
  invited: "招待中",
  suspended: "停止中",
}

const statusVariants: Record<Member["status"], "default" | "secondary" | "destructive"> = {
  active: "default",
  invited: "secondary",
  suspended: "destructive",
}

const columns: ColumnDef<Member>[] = [
  {
    accessorKey: "name",
    header: "名前",
    cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
  },
  {
    accessorKey: "role",
    header: "権限",
    cell: ({ row }) => roleLabels[row.original.role],
  },
  {
    accessorKey: "status",
    header: "状態",
    cell: ({ row }) => {
      const status = row.original.status
      return <Badge variant={statusVariants[status]}>{statusLabels[status]}</Badge>
    },
  },
  { accessorKey: "joinedAt", header: "参加日" },
]

const labels: DataTableLabels = {
  filterPlaceholder: "名前で絞り込み...",
  noResults: "該当する結果がありません。",
  previous: "前へ",
  next: "次へ",
  rowsPerPage: "表示件数",
  pageSizeOption: (size) => size + "件",
}

export function MembersTable() {
  return (
    <DataTable
      columns={columns}
      data={members}
      filter={{ columnId: "name", placeholder: labels.filterPlaceholder }}
      labels={labels}
      pageSize={10}
      pageSizeOptions={[10, 25, 50, 100, 200]}
    />
  )
}