import type { ReactNode } from "react";
import Badge from "../../components/ui/Badge";

interface SectionTitleProps {
  badge?: string;
  title: string;
  children?: ReactNode;
  className?: string;
  descriptionClassName?: string;
  headingClassName?: string;
}

export default function SectionTitle({
  badge,
  title,
  children,
  className = "",
  descriptionClassName = "",
  headingClassName = "",
}: SectionTitleProps) {
  return (
    <div className={`mx-auto max-w-4xl text-center ${className}`}>
      {badge && <Badge className="bg-transparent!">{badge}</Badge>}

      <h2
        className={`mt-4 2xl:mt-5 font-heading text-heading  text-center text-2xl font-medium capitalize leading-tight lg:text-3xl 2xl:text-4xl 2xl:leading-11 ${headingClassName}`}
        dangerouslySetInnerHTML={{ __html: title }}
      />

      {children && (
        <p className={` mt-5 text-base text-text lg:text-lg 2xl:text-xl 2xl:leading-7 ${descriptionClassName} `}>
          {children}
        </p>
      )}
    </div>
  );
}