import React from "react";
import { cn } from "../lib/utils";
import { Badge } from "./ui/badge";

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

export function SectionHeader({
    badge,
    title,
    description,
    align = "center",
    className,
}: SectionHeaderProps) {
    const alignClasses = {
        center: "text-center mx-auto",
        left: "text-left mr-auto", // reset margin if needed
        right: "text-right ml-auto",
    };

    return (
        <div className={cn("space-y-4 mb-16", alignClasses[align], className)}>
            <Badge variant="glass" className="py-1.5 px-4">{badge}</Badge>
            <h2 className="text-3xl md:text-4xl font-black text-primary tracking-tight">
                {title}
            </h2>
            {description && (
                <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
                    {description}
                </p>
            )}
        </div>
    );
}