"use client";

import { AuthorizedAction } from "@/components/auth/authorized-action";
import { Button } from "@/components/ui/button";
import { Empty } from "@/components/ui/empty";
import type { ActionSpec } from "@/lib/rbac/action-access";
import { LucideIcon } from "lucide-react";
import { Link } from "@/i18n/routing";

interface EmptyStateProps {
  icon?: LucideIcon;
  title: string;
  description?: string;
  action?: ActionSpec & {
    label: string;
    href?: string;
    onClick?: () => void;
  };
}

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
}: EmptyStateProps) {
  return (
    <Empty>
      <div className="flex flex-col items-center justify-center gap-4 py-12">
        {Icon && <Icon className="h-12 w-12 text-muted-foreground" />}
        <div className="text-center space-y-2">
          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
          {description && (
            <p className="text-sm text-muted-foreground max-w-md">
              {description}
            </p>
          )}
        </div>
        {action && (
          <AuthorizedAction action={action} surface="empty">
            <Button asChild={!!action.href} onClick={action.onClick}>
              {action.href ? (
                <Link href={action.href}>{action.label}</Link>
              ) : (
                action.label
              )}
            </Button>
          </AuthorizedAction>
        )}
      </div>
    </Empty>
  );
}