import { getColors } from '@/themes/getColors';
import { Box } from '@mui/material';
import { SxProps, useTheme } from '@mui/material/styles';

type DotProps = {
  color?: string;
  size?: number;
  variant?: string;
  sx?: SxProps;
};

function Dot({ color, size, variant, sx }: DotProps) {
  const theme = useTheme();
  const colors = getColors(theme as any, color as any);
  const { main } = colors;

  return (
    <Box
      component="span"
      sx={{
        width: size || 8,
        height: size || 8,
        borderRadius: '50%',
        bgcolor: variant === 'outlined' ? '' : main,
        ...(variant === 'outlined' && {
          border: `1px solid ${main}`
        }),
        ...sx
      }}
    />
  );
}
export { Dot };
export type { DotProps };