import Link from "next/link";
import { ThemeToggle } from "@/components/ThemeToggle";
import { brand } from "@/content/ebook";

type SiteHeaderProps = {
  ctaHref?: string;
  ctaLabel?: string;
  showBack?: boolean;
};

export function SiteHeader({
  ctaHref = "/read",
  ctaLabel = "Start reading",
  showBack = false,
}: SiteHeaderProps) {
  return (
    <header className="sticky top-0 z-50 h-[var(--header-h)] border-b border-[var(--border)]/70 bg-[var(--background)]/80 backdrop-blur-xl">
      <div className="mx-auto flex h-full max-w-6xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
        {showBack ? (
          <Link
            href="/"
            className="flex shrink-0 items-center gap-1.5 text-sm font-medium text-[var(--muted)] transition-colors hover:text-[var(--foreground)] sm:hidden"
          >
            <span aria-hidden>←</span> Home
          </Link>
        ) : null}
        <Link
          href="/"
          className={`group flex min-w-0 items-center gap-2.5 ${showBack ? "hidden sm:flex" : "flex"}`}
        >
          <span
            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--gradient-1)] via-[var(--gradient-2)] to-[var(--gradient-3)] text-white shadow-lg shadow-teal-500/20"
            aria-hidden
          >
            <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="12" cy="12" r="9" />
              <path d="M2 12h20M12 2c2.5 2.8 4 6 4 10s-1.5 7.2-4 10M12 2c-2.5 2.8-4 6-4 10s1.5 7.2 4 10" strokeLinecap="round" />
            </svg>
          </span>
          <span className="min-w-0">
            <span className="block truncate font-display text-sm font-bold tracking-tight text-[var(--foreground)] sm:text-base">
              {brand.name}
            </span>
            <span className="hidden truncate text-[10px] font-medium uppercase tracking-wider text-[var(--muted)] sm:block">
              {brand.tagline}
            </span>
          </span>
        </Link>

        <div className="flex items-center gap-2 sm:gap-3">
          <ThemeToggle />
          <Link
            href={ctaHref}
            className="hidden h-10 items-center justify-center rounded-full bg-gradient-to-r from-[var(--gradient-1)] via-[var(--gradient-2)] to-[var(--gradient-3)] px-5 text-sm font-semibold text-white shadow-md shadow-teal-500/20 transition-transform hover:scale-[1.02] active:scale-[0.98] sm:inline-flex"
          >
            {ctaLabel}
          </Link>
        </div>
      </div>
    </header>
  );
}