"use client";

/**
 * Empty state when there are no products (e.g. "No products in this category").
 * Reusable for index, category, sub-category, and top-category pages.
 */
export function ShopEmptyState({
  title = "No products found",
  description,
}: {
  title?: string;
  description?: string;
}) {
  return (
    <div className="flex flex-col items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--surface)] py-12 px-6 text-center">
      <p className="font-[family-name:var(--font-fraunces)] text-lg font-semibold text-[var(--foreground)] md:text-xl">
        {title}
      </p>
      {description && (
        <p className="mt-2 text-sm text-[var(--muted)] max-w-md">{description}</p>
      )}
    </div>
  );
}
