import SectionBadge from "@/components/shared/SectionBadge/Index";

interface SectionHeaderProps {
  badge: string;
  title: string;
  badgeVariant?: "primary" | "secondary";
  titleClassName?: string;
  badgeClassName?: string;
  className?: string;
}

export default function SectionHeader({
  badge,
  title,
  badgeVariant = "secondary",
  titleClassName = "",
  badgeClassName = "",
  className = "",
}: SectionHeaderProps) {
  return (
    <div className={`flex flex-col gap-4 sm:gap-5 md:gap-8 lg:gap-10 ${className}`}>
      <SectionBadge text={badge} variant={badgeVariant} className={badgeClassName} />
      <h1 className={`font-bold text-white text-[20px] sm:text-[24px] md:text-[32px] lg:text-[36px] xl:text-[40px] ${titleClassName}`}>
        {title}
      </h1>
    </div>
  );
}