import { Stack } from '@mui/material';
import { useTheme } from '@mui/material/styles';

import { type DecoratorProps, type DecoratorType } from './types';

const Decorator = ({ type }: DecoratorProps) => {
  const theme = useTheme();

  const colorMap: Record<DecoratorType, string> = {
    promoter: theme.palette.new.graphics.success[700],
    detractor: theme.palette.new.graphics.error[600],
    neutral: theme.palette.new.graphics.warning[600],
  };

  return (
    <Stack
      sx={{
        width: 16,
        height: 16,
        borderRadius: '50%',
        backgroundColor: colorMap[type],
        border: `2px solid ${theme.palette.new.border.neutral.default}`,
      }}
    />
  );
};

export default Decorator;
