import { clsx } from "clsx";
import type { LucideIcon } from "lucide-react";

type Props = {
  Icon?: LucideIcon;
  title: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
};

export function EmptyState({
  Icon,
  title,
  description,
  action,
  className,
}: Props) {
  return (
    <div
      className={clsx(
        "flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-[var(--color-line)] bg-white px-6 py-12 text-center",
        className,
      )}
    >
      {Icon && (
        <span className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--color-mist)] text-[var(--color-blue)]">
          <Icon className="h-6 w-6" aria-hidden />
        </span>
      )}
      <h3 className="font-display text-[18px] font-extrabold tracking-tight text-[var(--color-ink)]">
        {title}
      </h3>
      {description && (
        <p className="max-w-md text-[14px] text-[var(--color-slate)]">
          {description}
        </p>
      )}
      {action && <div className="mt-2">{action}</div>}
    </div>
  );
}
