import { FC, useEffect, useRef } from 'react';
import styles from './main-title.module.scss';

interface MainTitle {
  title: string;
  subtitle?: string;
  small?: string;
  color?: 'coldturkey' | 'tundora';
}

const MainTitleComponent: FC<MainTitle> = ({ title, subtitle, small, color }) => {
  const smallTitle = useRef(null);

  useEffect(() => {
    if (smallTitle.current) {
      const width = smallTitle.current.getBoundingClientRect().width;
      smallTitle.current.style.left = `-${width}px`;
    }
  });

  return (
    <div className={styles.mainTitle}>
      {small && <span className={styles.small} ref={smallTitle}>{small}</span>}
      <h1 className={`${styles.title} ${styles[`title-${color}`]}`}>{title}</h1>
      {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
    </div>
  );
};

MainTitleComponent.defaultProps = { color: 'coldturkey' };

export default MainTitleComponent;