import * as React from "react";

import { Typography } from "@/components/ui/typography";
import { cn } from "@/lib/utils";

/**
 * Small pill label above a section title. Copy arrives already translated from
 * the parent (reusable-component convention). `color="inherit"` lets the pill's
 * `text-primary-blue` cascade instead of Typography forcing its own color.
 */
export function Eyebrow({
  children,
  tone = "brand",
  className,
}: {
  children: React.ReactNode;
  /** "onDark" flips to a white glass pill for use over a blue/dark band */
  tone?: "brand" | "onDark";
  className?: string;
}) {
  const dark = tone === "onDark";
  return (
    <span
      className={cn(
        "inline-flex items-center gap-2 rounded-full border px-3 py-1",
        dark
          ? "border-white/30 bg-white/15 text-white"
          : "border-primary-sky-blue/30 bg-accent text-primary-blue",
        className,
      )}
    >
      <span
        className={cn(
          "size-1.5 rounded-full",
          dark ? "bg-white" : "bg-primary-sky-blue",
        )}
      />
      <Typography
        as="span"
        variant="caption"
        color="inherit"
        className="font-medium tracking-wide uppercase"
      >
        {children}
      </Typography>
    </span>
  );
}

/** Centered (or start-aligned) section heading: eyebrow + title + subtitle. */
export function SectionHeading({
  eyebrow,
  title,
  subtitle,
  align = "center",
  className,
}: {
  eyebrow: React.ReactNode;
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  align?: "center" | "start";
  className?: string;
}) {
  return (
    <div
      className={cn(
        "flex flex-col gap-3",
        align === "center"
          ? "items-center text-center"
          : "items-start text-start",
        className,
      )}
    >
      <Eyebrow>{eyebrow}</Eyebrow>
      <Typography
        as="h2"
        variant="h1"
        className="max-w-2xl text-[26px] leading-tight sm:text-[30px] lg:text-[34px]"
      >
        {title}
      </Typography>
      {subtitle && (
        <Typography
          variant="body"
          color="secondary"
          className="max-w-2xl text-[15px]"
        >
          {subtitle}
        </Typography>
      )}
    </div>
  );
}