"use client";

import * as React from "react";
import { Reveal } from "./Reveal";
import { cn } from "../utils/cn";

interface SectionHeaderProps {
  title: string;
  subtitle?: string;
  className?: string;
  align?: "left" | "center" | "right";
}

export const SectionHeader: React.FC<SectionHeaderProps> = ({
  title,
  subtitle,
  className = "",
  align = "left",
}) => {
  return (
    <div
      className={cn(
        "relative",
        align === "center" ? "text-center" : "text-left",
        className,
      )}
    >
      <Reveal width="100%">
        <div
          className={cn(
            "relative inline-block",
            align === "center" ? "mx-auto" : "",
          )}
        >
          {/* Industrial Overline */}
          <div
            className={cn(
              "flex items-center gap-4 mb-2 text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400",
              align === "center" ? "justify-center" : "justify-start",
            )}
          >
            <div className="w-6 h-px bg-slate-200" />
            <span>{subtitle || "Section"}</span>
            <div className="w-12 h-px bg-slate-100" />
          </div>

          <h2 className="text-4xl md:text-6xl font-bold text-slate-900 tracking-tighter leading-none">
            {title}
            <span className="text-slate-200">.</span>
          </h2>
        </div>
      </Reveal>
    </div>
  );
};
