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

import { StyledParagraph } from '../StyledComponents';
import { useTheme } from '../Theme';
import { ParagraphProps } from './types.d';

export const Paragraph: FC<ParagraphProps> = ({
  children,
  className = '',
  color = 'secondary',
  id = '',
  multiline = false,
  size = 'big',
  style = {},
  hover = false,
}) => {
  const theme = useTheme();
  const classNames = cn({
    square_ui_paragraph: true,
    small: size === 'small',
    medium: size === 'medium',
    big: size === 'big',
    multiline: !!multiline,
    [className]: className,
  });

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

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