"use client";

import Link from "next/link";
import { Button } from "@/components/ui";

export function CommercialEmptyState({
  title,
  description,
  actionHref,
  actionLabel,
  secondaryHref,
  secondaryLabel,
  hint,
}: {
  title: string;
  description?: string;
  actionHref?: string;
  actionLabel?: string;
  secondaryHref?: string;
  secondaryLabel?: string;
  hint?: string;
}) {
  return (
    <div
      className="rounded-2xl border border-dashed border-gray-200 bg-gray-50/80 px-6 py-12 text-center dark:border-gray-700 dark:bg-gray-900/50"
      role="status"
    >
      <p className="text-base font-semibold text-secondary dark:text-gray-100">{title}</p>
      {description ? (
        <p className="mx-auto mt-2 max-w-md text-sm text-gray-600 dark:text-gray-400">{description}</p>
      ) : null}
      {hint ? <p className="mx-auto mt-2 max-w-md text-xs text-gray-400">{hint}</p> : null}
      {(actionHref && actionLabel) || (secondaryHref && secondaryLabel) ? (
        <div className="mt-5 flex flex-wrap items-center justify-center gap-2">
          {actionHref && actionLabel ? (
            <Link href={actionHref}>
              <Button variant="outline" size="sm">
                {actionLabel}
              </Button>
            </Link>
          ) : null}
          {secondaryHref && secondaryLabel ? (
            <Link href={secondaryHref}>
              <Button size="sm">{secondaryLabel}</Button>
            </Link>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}