import Title from '@design-system/Title';
import { Divider, Stack, useTheme } from '@mui/material';
import { getMonochromeColors } from '@utils/colors';

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

const BreakdownChart = ({ values, colors, labels }: BreakdownChartProps) => {
  const { palette } = useTheme();

  const finalColors =
    colors ||
    getMonochromeColors(
      palette.new.action.button.background.primary.hover,
      values.length,
    );

  return (
    <Stack
      className="BreakdownChart-root"
      sx={{
        gap: 1,
        width: '100%',
      }}
    >
      {values.map((value, index) => (
        <Stack
          key={`${labels[index]}-${value}`}
          sx={{
            gap: 1,
            '&:last-child > .MuiDivider-root': {
              display: 'none',
            },
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              gap: 1,
            }}
          >
            <Stack
              sx={{
                width: '12px',
                height: '12px',
                borderRadius: '100%',
                backgroundColor: finalColors[index],
              }}
            />
            <Title
              variant="S"
              fontWeight="fontWeightRegular"
              overflow="tooltip"
              withEllipsis
              sx={{ flex: 1, minWidth: 0 }}
              title={labels[index]}
            />
            <Title
              variant="M"
              title={value.toString()}
            />
          </Stack>
          <Divider />
        </Stack>
      ))}
    </Stack>
  );
};

export default BreakdownChart;