import Image from "next/image";

interface NoDataProps {
    title?: string;
    subtitle?: string;
    action?: React.ReactNode;
  }
  
  export function EmptyState({
    title = "No record yet",
    subtitle = "Get started by adding your first record",
    action,
  }: NoDataProps) {
    return (
      <div className="flex min-h-[420px] flex-col items-center justify-center gap-6 p-8 text-center">
        <div className="rounded-full bg-primary p-6">
         <Image src={`/stack.png`} width={80}
                    height={80} alt="no data found" />
        </div>
  
        <div className="space-y-2">
          <h3 className="text-xl text-primary font-semibold tracking-tight mb-2">{title}</h3>
          <p className="text-secondary max-w-sm font-normal">{subtitle}</p>
        </div>
  
        {action && <div className="mt-4">{action}</div>}
      </div>
    );
  }