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

export default function SectionTitle({
  title,
  description,
  description_bold,
  reverseColor,
  locale,
}: 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-lg leading-1 ${locale === 'en' ? 'tracking-[0.175rem]' : ''}`}
        >
          {title}
        </h3>
      </div>
      <h2 className="text-3xl font-extralight tracking-tight md:text-[3.25rem] md:leading-14">
        {description}
        {description_bold && (
          <strong className="block font-light md:font-bold">
            {description_bold}
          </strong>
        )}
      </h2>
    </div>
  );
}
