"use client";

import React from "react";
import { Inbox, ShieldCheck } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "./Button";

export function EmptyState({
  title = "Nothing here yet",
  description = "Create some data in ASF or wait a moment for it to load.",
  icon: Icon = Inbox,
  action,
  actionLabel,
  className,
}: {
  title?: string;
  description?: string;
  icon?: React.ComponentType<{ className?: string }>;
  action?: () => void;
  actionLabel?: string;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center py-14 px-6 text-center border border-dashed border-slate-200 rounded-xl bg-slate-50/60 animate-fade-in",
        className,
      )}
    >
      <div className="w-14 h-14 rounded-full bg-white border border-slate-200 grid place-items-center text-slate-500 shadow-sm mb-4">
        <Icon className="w-6 h-6" />
      </div>
      <h3 className="text-base font-semibold text-slate-800 mb-1">{title}</h3>
      <p className="text-sm text-slate-500 max-w-md mb-5">{description}</p>
      {action && actionLabel && (
        <Button variant="primary" size="sm" onClick={action}>
          <ShieldCheck className="w-4 h-4" />
          {actionLabel}
        </Button>
      )}
    </div>
  );
}