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

import { cn } from "@/lib/utils";

export function EmptyState({

  icon: Icon,

  title,

  description,

  action,

  className,

}: {

  icon: LucideIcon;

  title: string;

  description?: string;

  action?: React.ReactNode;

  className?: string;

}) {

  return (

    <div

      className={cn(

        "flex flex-col items-center justify-center gap-3 rounded-[var(--radius-lg)]",

        "border border-dashed border-[var(--color-border-subtle)] px-6 py-12 text-center",

        className,

      )}

    >

      <div className="grid h-12 w-12 place-items-center rounded-full bg-[var(--color-accent-teal-soft)] text-[var(--color-accent-teal)]">

        <Icon className="h-5 w-5" aria-hidden />

      </div>

      <div className="space-y-1">

        <p className="text-sm font-semibold text-[var(--color-fg-primary)]">{title}</p>

        {description ? (

          <p className="mx-auto max-w-sm text-xs text-[var(--color-fg-tertiary)]">{description}</p>

        ) : null}

      </div>

      {action}

    </div>

  );

}