import { Box, BoxProps, styled, Typography } from '@mui/material'
import { NavLink } from 'react-router-dom'

interface TabsContainerProps {
  tabs: {
    label: string
    path: string
  }[]
  size?: 'small' | 'medium'
  center?: boolean
}

export const StyledTabsWrapper = styled(Box)<{
  size: 'small' | 'medium'
  center
}>(({ theme, size, center }) => ({
  justifyContent: center ? 'center' : 'flex-start',
  borderBottom: theme.borders.grayLight,
  minHeight: size === 'small' ? '48px' : '60px',
  display: 'flex',
  width: '100%',
  gap: '5px',
  gapY: '20px',
  alignItems: 'end',
  paddingLeft: '20px',
  flexWrap: 'wrap',
  '& a': {
    display: 'block',
    textDecoration: 'none',
    fontSize: size === 'small' ? '14px' : '15px',
    fontWeight: 600,
    color: theme.palette.secondary.main,
  },
}))

const StyledTab = styled(
  (props: BoxProps) => (
    <Box {...props}>
      <Typography variant="h6" fontSize={16}>
        {props.children}
      </Typography>
      <span className="indicator"></span>
    </Box>
  ),
  { shouldForwardProp: (prop) => prop !== 'active' },
)<{ active: boolean }>(({ theme, active }) => ({
  paddingRight: '24px',
  paddingBottom: '0',
  transition: 'all 0.4s ease',
  '& .indicator': {
    display: 'block',
    background: theme.palette.common.yellow,
    visibility: 'hidden',
    height: '3px',
    width: '70%',
    borderRadius: '2px',
    marginTop: '3px',
    ...(active && {
      visibility: 'visible',
    }),
  },
}))

export default function NavigationTabs({
  tabs,
  size = 'medium',
  center = false,
}: TabsContainerProps) {
  return (
    <StyledTabsWrapper size={size} center={center}>
      {tabs?.map((item, index) => (
        <NavLink key={index} to={item?.path}>
          {({ isActive }) => (
            <StyledTab active={isActive}>{item?.label}</StyledTab>
          )}
        </NavLink>
      ))}
    </StyledTabsWrapper>
  )
}
