import Link from '@design-system/Link';
import Title from '@design-system/Title';
import Stack from '@mui/material/Stack';
import useTheme from '@mui/material/styles/useTheme';

import { type NavigableLabelTicksProps } from './types';

const renderTitle = (title: string, onClick?: () => void) => {
  if (!onClick) return title;

  return (
    <Link
      component="button"
      underline="hover"
      onClick={onClick}
      hasIcon={false}
    >
      {title}
    </Link>
  );
};

const NavigableLabelTicks = ({ items }: NavigableLabelTicksProps) => {
  const theme = useTheme();

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'stretch',
        width: '100%',
      }}
    >
      {items.map((item, index) => (
        <Title
          key={index}
          title={item.title ? renderTitle(item.title, item.onClick) : undefined}
          description={item.description}
          variant="S"
          fontWeight="fontWeightRegular"
          sx={{
            flex: 1,
            width: '100%',
            minWidth: 114,
            paddingBottom: 2.5,
            borderBottom: item.highlighted ? '8px solid' : 'none',
            borderColor: theme.palette.new.border.neutral.brand,
          }}
          centered
        />
      ))}
    </Stack>
  );
};

export default NavigableLabelTicks;
