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',
  children,
  ...rest
}: Props) => {
  const getComponent = (): React.FunctionComponent => {
    if (variant === 'title') {
      return Title;
    }
    if (variant === 'subtitle') {
      return Subtitle;
    }
    return Body;
  };
  const Component = getComponent();

  return (
    <Component
      {...rest}
    >
      {children}
    </Component>
  );
};

export default Typography;