/*
  section-heading.tsx
  spboucher.ai Web
  Author: Simon-Pierre Boucher
  Mail: contact@spboucher.ai
*/

import type { LucideIcon } from "lucide-react";

import { IconTile } from "@/components/icon-tile";
import { cn } from "@/lib/utils";

interface SectionHeadingProps {
  eyebrow?: string;
  title: string;
  description?: string;
  icon?: LucideIcon;
  as?: "h1" | "h2" | "h3";
  className?: string;
}

/** Unified section header: rounded icon tile, eyebrow, title, description. */
export function SectionHeading({
  eyebrow,
  title,
  description,
  icon,
  as: Tag = "h2",
  className,
}: SectionHeadingProps) {
  const isPageTitle = Tag === "h1";
  return (
    <div className={cn("flex items-start gap-4", className)}>
      {icon && <IconTile icon={icon} size={isPageTitle ? "lg" : "md"} />}
      <div className="min-w-0 flex-1">
        {eyebrow && (
          <p className="flex items-center gap-3 font-mono text-[0.68rem] font-medium uppercase tracking-[0.22em] text-primary">
            <span
              aria-hidden="true"
              className="h-px w-6 shrink-0 bg-primary/60"
            />
            {eyebrow}
          </p>
        )}
        <Tag
          className={cn(
            "font-display tracking-tight",
            isPageTitle
              ? "mt-2 text-4xl font-semibold sm:text-5xl"
              : "mt-1 text-2xl font-semibold",
            !eyebrow && "mt-0",
          )}
        >
          {title}
        </Tag>
        {description && (
          <p className="mt-2.5 max-w-3xl text-sm leading-relaxed text-muted-foreground">
            {description}
          </p>
        )}
      </div>
    </div>
  );
}