"use client";

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

type Alignment = "left" | "center";

interface ServicesHeroProps {
  title: string;
  description: string;
  align?: Alignment;
  eyebrow?: ReactNode;
  children?: ReactNode;
  className?: string;
  /** Use display font for title */
  displayFont?: boolean;
  /** Show animated entrance */
  animated?: boolean;
}

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

export function ServicesHero({
  title,
  description,
  align = "center",
  eyebrow,
  children,
  className,
  displayFont = true,
  animated = true,
}: ServicesHeroProps) {
  const animationClasses = animated ? "animate-in fade-in slide-in-from-bottom-4 duration-500" : "";

  return (
    <div
      className={cn(
        "flex flex-col gap-3 mb-10",
        alignmentMap[align],
        className,
        align === "center" ? "mx-auto max-w-2xl" : ""
      )}
    >
      {eyebrow ? (
        <div
          className={cn(
            "text-sm font-semibold text-primary uppercase tracking-wider",
            animationClasses
          )}
          style={animated ? { animationDelay: "0ms" } : undefined}
        >
          {eyebrow}
        </div>
      ) : null}
      <h1
        className={cn(
          "text-display-md md:text-display-lg text-foreground leading-tight",
          displayFont && "font-display",
          animationClasses
        )}
        style={animated ? { animationDelay: "50ms" } : undefined}
      >
        {title}
      </h1>
      <p
        className={cn(
          "text-base md:text-lg text-muted-foreground leading-relaxed max-w-xl",
          align === "center" && "mx-auto",
          animationClasses
        )}
        style={animated ? { animationDelay: "100ms" } : undefined}
      >
        {description}
      </p>
      {children ? (
        <div
          className={cn("mt-2 w-full", animationClasses)}
          style={animated ? { animationDelay: "150ms" } : undefined}
        >
          {children}
        </div>
      ) : null}
    </div>
  );
}

export type { ServicesHeroProps };
