import React from 'react';
import Typography from '../Typography';
import { TabComponent } from './styles';
import { TabProps } from './interfaces';

const Tab: React.FC<TabProps> = ({
  isActive,
  onClick,
  text,
  fontSize = 20,
}) => {
  return (
    <TabComponent fontSize={fontSize} isActive={isActive} onClick={onClick}>
      <Typography variant="utility1" margin={[0, 0, 0, 0]}>
        {text}
      </Typography>
    </TabComponent>
  );
};

export default Tab;