import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { StyledMainText } from '../StyledComponents';
import { useTheme } from '../Theme';
import { TitleProps } from './types.d';

export const Title: FunctionComponent<TitleProps> = ({
  children,
  className = '',
  color = 'main',
  id = '',
  multiline = false,
  size = 'big',
  style = {},
}): React.ReactElement => {
  const theme = useTheme();
  const classNames = cn({
    square_ui_title: true,
    small_title: size === 'small',
    medium_title: size === 'medium',
    big_title: size === 'big',
    multiline,
    [className]: className,
  });

  const sizeNumber = typeof size === 'number' ? size : undefined;

  return (
    <StyledMainText id={id} className={classNames} $theme={theme} $color={color} style={{ fontSize: sizeNumber, ...style }}>
      {children as unknown as React.ReactNode}
    </StyledMainText>
  );
};
