import React, { FC } from 'react';
import { TypographyProps } from '../../interfaces';
import { StyledTypography } from './styles';

const Typography: FC<TypographyProps> = ({
  children,
  variant,
  bold,
  as,
  ...rest
}) => {
  switch (variant) {
    case 'h1':
      return (
        <StyledTypography as={as || 'h1'} variant="h1" bold={bold} {...rest}>
          {children}
        </StyledTypography>
      );
    case 'h2':
      return (
        <StyledTypography as={as || 'h2'} variant="h2" bold={bold} {...rest}>
          {children}
        </StyledTypography>
      );
    case 'h3':
      return (
        <StyledTypography as={as || 'h3'} variant="h3" bold={bold} {...rest}>
          {children}
        </StyledTypography>
      );
    case 'h4':
      return (
        <StyledTypography as={as || 'h4'} variant="h4" bold={bold} {...rest}>
          {children}
        </StyledTypography>
      );
    case 'h5':
      return (
        <StyledTypography as={as || 'h5'} variant="h5" bold={bold} {...rest}>
          {children}
        </StyledTypography>
      );
    case 'utility1':
    case 'utility2':
    case 'utility3':
    case 'utility4':
    case 'utility5':
      return (
        <StyledTypography
          as={as || 'span'}
          variant={variant}
          bold={bold}
          {...rest}
        >
          {children}
        </StyledTypography>
      );
    default:
      return (
        <StyledTypography
          as={as || 'p'}
          variant={variant || 'p1'}
          bold={bold}
          {...rest}
        >
          {children}
        </StyledTypography>
      );
  }
};

export default Typography;