import React from 'react';

import { Title, Subtitle, Body } from './styled';

type Props = {
  variant?: 'title' | 'subtitle' | 'body';
  light?: boolean;
  children: string | number;
  style?: {};
};

const Typography: React.FunctionComponent<Props> = ({
  variant = 'title',
  light = false,
  children,
  style = {},
}) => {
  const getComponent = () => {
    if (variant === 'title') {
      return Title;
    } else if (variant === 'subtitle') {
      return Subtitle;
    }
    return Body;
  };
  const Component = getComponent();

  return (
    <Component
      light={light}
      style={style}
    >
      {children}
    </Component>
  );
};

export default Typography;
