import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { VersionTable } from "@/components/tables/version-table";
import type { ColumnDef } from "@tanstack/react-table";
import { Plus, Shield, type LucideIcon } from "lucide-react";
import { Link } from "@tanstack/react-router";
import type { ReactNode } from "react";

interface RoleManagerTemplateProps<TData> {
  title: string;
  description: string;
  data: TData[];
  isLoading: boolean;
  columns: ColumnDef<TData, any>[];
  onTableInit?: (table: any) => void;
  // Optional customization
  icon?: LucideIcon;
  tableTitle?: string;
  tableDescription?: string;
  createButtonLabel?: string;
  createLink?: string;
  headerActions?: ReactNode;
}

export function RoleManagerTemplate<TData>({
  title,
  description,
  data,
  isLoading,
  columns,
  onTableInit,
  icon: Icon = Shield,
  tableTitle = "Danh sách",
  tableDescription,
  createButtonLabel = "Tạo mới",
  createLink,
  headerActions,
}: RoleManagerTemplateProps<TData>) {
  return (
    <div className="w-full px-6 space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">{title}</h1>
          <p className="text-muted-foreground mt-2">{description}</p>
        </div>
        <div className="flex items-center gap-2">
          {headerActions}
          {createLink && (
            <Link to={createLink}>
              <Button>
                <Plus className="h-4 w-4 mr-2" />
                {createButtonLabel}
              </Button>
            </Link>
          )}
        </div>
      </div>

      {/* Table */}
      <Card className="w-full">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Icon className="h-5 w-5" /> {tableTitle}
          </CardTitle>
          {tableDescription && (
            <CardDescription>{tableDescription}</CardDescription>
          )}
        </CardHeader>
        <CardContent>
          <VersionTable
            data={data}
            isLoading={isLoading}
            columns={columns}
            onTableInit={onTableInit}
          />
        </CardContent>
      </Card>
    </div>
  );
}