"use client";

interface HeadingToolbarProps {
  title?: string;
  subTitle?: string;
  titleClassName?: string;
  subTitleClassName?: string;
}

export function HeadingToolbar({
  title,
  subTitle,
  titleClassName = "",
  subTitleClassName = "",
}: HeadingToolbarProps) {
  return (
    <div>
      {title && (
        <div
          className={`
            font-body text-base lg:text-lg xl:text-xl 2xl:text-2xl font-semibold xl:leading-8.5 text-heading
            ${titleClassName}
          `}
        >
          {title}
        </div>
      )}

      {subTitle && (
        <p
          className={`
            2xl:mt-0.5 font-body text-sm 2xl:text-base font-normal text-text
            ${subTitleClassName}
          `}
        >
          {subTitle}
        </p>
      )}
    </div>
  );
}