import { Icon } from '@/components/uikit/icons';
import { ISectionTitleProps } from './sectionTitle';

export default function SectionTitle({
  title,
  description,
  description_bold,
  reverseColor,
}: ISectionTitleProps) {
  return (
    <div
      className={`flex flex-col gap-4 ${reverseColor ? 'text-white' : 'text-gray-500'}`}
    >
      <div className={`flex items-center gap-2`}>
        <Icon name="setting" className="text-primary" />
        <h3 className="text-sm leading-1 tracking-[0.175rem]">{title}</h3>
      </div>
      <h2 className="text-[3.25rem] leading-14 font-extralight tracking-tight">
        {description}
        {description_bold && (
          <strong className="block font-bold">{description_bold}</strong>
        )}
      </h2>
    </div>
  );
}
