import { twMerge } from "tailwind-merge";

export function SectionTitle({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <h2
      className={twMerge(
        "text-[40px] leading-[48px] md:text-[64px] md:leading-[72px] font-bold text-white mb-8",
        className,
      )}
    >
      {children}
    </h2>
  );
}

export function SectionSubTitle({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={twMerge(
        "text-carbon text-[15px] leading-[21px] mb-[30px] font-mono",
        className,
      )}
    >
      {children}
    </div>
  );
}

export function SectionDescription({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <p className={twMerge("my-4 text-[22px] leading-7 text-carbon font-light", className)}>
      {children}
    </p>
  );
}