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

export function EmptyState({
  title,
  description,
  action,
}: {
  title: string;
  description: string;
  action?: ReactNode;
}) {
  return (
    <div className="archi-panel relative overflow-hidden px-6 py-14 text-center sm:px-10">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--archi-gold)] to-transparent"
      />
      <p className="text-[0.65rem] tracking-[0.28em] text-[var(--archi-ink-muted)] uppercase">
        Get started
      </p>
      <h2 className="mt-3 font-[family-name:var(--font-display)] text-2xl tracking-tight sm:text-3xl">
        {title}
      </h2>
      <p className="mx-auto mt-3 max-w-md text-sm leading-6 text-[var(--archi-ink-muted)]">
        {description}
      </p>
      {action ? <div className="mt-6 flex justify-center">{action}</div> : null}
    </div>
  );
}

export function PrimaryButton({
  href,
  children,
}: {
  href: string;
  children: ReactNode;
}) {
  return (
    <Link href={href} className="archi-btn-primary">
      {children}
    </Link>
  );
}

export function SecondaryButton({
  href,
  children,
}: {
  href: string;
  children: ReactNode;
}) {
  return (
    <Link
      href={href}
      className="inline-flex border border-[var(--archi-line)] bg-white px-4 py-2 text-sm transition hover:border-[var(--archi-gold)]/45"
    >
      {children}
    </Link>
  );
}
