import React from "react";
import clsx from "clsx";

interface AboutSectionHeadingProps {
  title: string;
  description: React.ReactNode;
  className?: string;
}

export default function AboutSectionHeading({
  title,
  description,
  className,
}: AboutSectionHeadingProps) {
  return (
    <div className={clsx("max-2xl:flex max-2xl:flex-col", className)}>
      <div className="2xl:pt-[0.556vw] 2xl:pr-[14.722vw] 2xl:pb-[4.694vw] md:pb-[3.125vw] pb-[6.667vw] w-max float-left caption text-[#A7A08E]">
        {title}
      </div>
      <p className="2xl:h2 md:h3 subheadline-m [font-family:New_York_Large]">
        {description}
      </p>
    </div>
  );
}
