"use client";

import { CollectionTable } from "@/components/collections/collection-table";
import { Badge } from "@/components/ui/badge";
import { AccessRole } from "@/lib/types";

export function RolesTable() {
  const columns = [
    {
      key: "_id",
      label: "ID",
      render: (value: unknown) => (
        <span className="font-mono text-xs">{String(value).slice(-8)}</span>
      ),
    },
    {
      key: "name",
      label: "Nom du rôle",
      render: (value: unknown) => (
        <span className="font-semibold">{String(value)}</span>
      ),
    },
    {
      key: "permissions",
      label: "Permissions",
      render: (value: unknown) => {
        if (!Array.isArray(value)) return "-";
        return (
          <div className="flex flex-wrap gap-1">
            {value.slice(0, 3).map((permission, index) => (
              <Badge key={index} variant="secondary" className="text-xs">
                {String(permission)}
              </Badge>
            ))}
            {value.length > 3 && (
              <Badge variant="outline" className="text-xs">
                +{value.length - 3}
              </Badge>
            )}
          </div>
        );
      },
    },
  ];

  return (
    <CollectionTable<AccessRole>
      collectionName="accessroles"
      title="Liste des rôles"
      columns={columns}
    />
  );
}