import Link from "next/link";
import type { ReactNode } from "react";

type EmptyStateProps = {
  title: string;
  description?: string;
  action?: { href: string; label: string };
  icon?: ReactNode;
};

export function EmptyState({ title, description, action, icon }: EmptyStateProps) {
  return (
    <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-muted/40 px-6 py-10 text-center">
      {icon ? <div className="text-fg/40">{icon}</div> : null}
      <div className="text-base font-semibold text-fg">{title}</div>
      {description ? <p className="max-w-sm text-sm text-fg/60">{description}</p> : null}
      {action ? (
        <Link
          href={action.href}
          className="mt-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-fg transition-opacity hover:opacity-90"
        >
          {action.label}
        </Link>
      ) : null}
    </div>
  );
}