import { type SxProps, useTheme } from '@material-hu/mui/index';
import Stack from '@material-hu/mui/Stack';

export const LiveDot = ({ sx }: { sx?: SxProps }) => {
  const { palette } = useTheme();
  const dotColor = palette.new.graphics.error[500];

  return (
    <Stack
      sx={{
        ...sx,
        width: 25,
        height: 25,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        '&::before': {
          content: '""',
          position: 'absolute',
          border: `2px solid ${dotColor}`,
          borderRadius: '50%',
          height: 20,
          width: 20,
          animation: 'pulsate 1s ease-out infinite',
          opacity: 0.0,
          '@keyframes pulsate': {
            '0%': {
              transform: 'scale(0.1)',
              opacity: 0.0,
            },
            '50%': {
              opacity: 1.0,
            },
            '100%': {
              transform: 'scale(1.3)',
              opacity: 0.0,
            },
          },
        },
        '&::after': {
          content: '""',
          position: 'absolute',
          width: 10,
          height: 10,
          backgroundColor: dotColor,
          borderRadius: '50%',
          zIndex: 1,
        },
      }}
    />
  );
};
