import * as React from "react";
import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
  className,
  compact,
}: {
  icon?: LucideIcon;
  title: string;
  description?: React.ReactNode;
  action?: React.ReactNode;
  className?: string;
  compact?: boolean;
}) {
  return (
    <div className={cn("flex flex-col items-center justify-center text-center rounded-lg border border-dashed border-border bg-bg-subtle/40", compact ? "px-6 py-10" : "px-6 py-16", className)}>
      {Icon ? (
        <div className="mb-4 flex size-10 items-center justify-center rounded-lg border border-border bg-bg shadow-xs">
          <Icon className="size-5 text-fg-muted" aria-hidden />
        </div>
      ) : null}
      <h3 className="text-[15px] font-semibold tracking-tight">{title}</h3>
      {description ? <div className="mt-1.5 max-w-sm text-[13px] text-fg-muted leading-relaxed">{description}</div> : null}
      {action ? <div className="mt-5 flex items-center gap-2">{action}</div> : null}
    </div>
  );
}