import { styled } from '@mui/material/styles';
import React from 'react';

import { Tab, Tabs } from '@mui/material';

interface StyledTabProps {
  label: string;
}

export const NormaTabs = styled(Tabs)(({ theme }) => ({
  borderBottom: `1px solid ${theme.palette.background.paper}`,
  '& .Mui-selected': {
    color: theme.palette.primary.main,
  },
  '& .MuiTabs-indicator': {
    backgroundColor: theme.palette.primary.main,
  },
  '& .MuiButtonBase-root': {
    textTransform: 'none',
  },
}));

export const NormaTab: React.ComponentType<StyledTabProps> = styled((props: StyledTabProps) => (
  <Tab disableRipple {...props} />
))(({ theme }) => ({
  textTransform: 'none',
  fontWeight: theme.typography.fontWeightRegular,
  fontSize: theme.typography.pxToRem(15),
  marginRight: theme.spacing(1),
  color: theme.palette.text.secondary,
  padding: '5px 15px',
  top: '5px',
  minWidth: '60px',
  '&.Mui-selected': {
    color: theme.palette.primary.main,
  },
  '&.Mui-focusVisible': {
    backgroundColor: theme.palette.background.default,
  },
}));