import Link from "next/link";

interface Props {
  title: string; // already split? no — single string. We'll style consistently.
  href?: string;
  eyebrow?: string;
  centered?: boolean;
  children?: React.ReactNode;
}

/**
 * Section header — B v2 style: centered eyebrow + italic Newsreader title +
 * thin separator line below. When `href` provided, "Tất cả →" is shown bottom right.
 */
export function SectionHeader({
  title,
  href,
  eyebrow,
  centered = true,
  children,
}: Props) {
  if (centered) {
    return (
      <header className="text-center mb-8 lg:mb-12">
        {eyebrow && <div className="eyebrow mb-2">{eyebrow}</div>}
        <h2 className="display-lg-vi">{title}</h2>
        <div
          className="w-16 h-[2px] mx-auto mt-4"
          style={{ background: "var(--accent)" }}
          aria-hidden
        />
        {children}
        {href && (
          <div className="mt-4">
            <Link
              href={href}
              className="text-[13px] font-semibold inline-flex items-center gap-1 hover:gap-2 transition-all"
              style={{ color: "var(--accent)" }}
            >
              Xem tất cả <span aria-hidden>→</span>
            </Link>
          </div>
        )}
      </header>
    );
  }

  // Inline variant: eyebrow + title left, "Xem hết" right
  return (
    <header className="flex items-end justify-between mb-8 pb-4 border-b hairline-strong">
      <div>
        {eyebrow && <div className="eyebrow mb-2">{eyebrow}</div>}
        <h2 className="display-lg-vi">{title}</h2>
      </div>
      {href && (
        <Link
          href={href}
          className="text-[13px] font-semibold whitespace-nowrap hover:underline"
          style={{ color: "var(--accent)" }}
        >
          Xem tất cả →
        </Link>
      )}
    </header>
  );
}