"use client";

import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

type Alignment = "left" | "center";

interface CatalogHeroProps {
  title: string;
  description: string;
  align?: Alignment;
  eyebrow?: ReactNode;
  children?: ReactNode;
  className?: string;
}

const alignmentMap: Record<Alignment, string> = {
  left: "text-left items-start",
  center: "text-center items-center",
};

export function CatalogHero({
  title,
  description,
  align = "center",
  eyebrow,
  children,
  className,
}: CatalogHeroProps) {
  return (
    <div
      className={cn(
        "flex flex-col gap-2 mb-8",
        alignmentMap[align],
        className,
        align === "center" ? "mx-auto max-w-2xl" : ""
      )}
    >
      {eyebrow ? <div className="text-xs font-medium text-blue-700">{eyebrow}</div> : null}
      <h1 className="text-2xl md:text-3xl font-bold text-gray-900 leading-tight">{title}</h1>
      <p className="text-sm text-gray-600 leading-relaxed">{description}</p>
      {children ? <div className="mt-1 w-full">{children}</div> : null}
    </div>
  );
}

export type { CatalogHeroProps };
