import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

interface FullScreenLoaderProps {
  message?: string;
  fullScreen?: boolean; // <-- новый проп
}

export const FullScreenLoader = ({
  message,
  fullScreen = true,
}: FullScreenLoaderProps) => {
  const containerSx = fullScreen
    ? {
        position: 'fixed' as const,
        inset: 0,
        display: 'flex',
        flexDirection: 'column' as const,
        alignItems: 'center',
        justifyContent: 'center',
        gap: 3,
        zIndex: 9999,
        pointerEvents: 'none' as const,
      }
    : {
        display: 'flex',
        flexDirection: 'column' as const,
        alignItems: 'center',
        justifyContent: 'center',
        gap: 3,
        width: '100%',
        height: '100%',
      };

  return (
    <Box sx={containerSx}>
      {/* Градиентное вращающееся кольцо */}
      <Box
        sx={{
          width: 80,
          height: 80,
          borderRadius: '50%',
          position: 'relative',
          overflow: 'hidden',
          background: 'conic-gradient(#F27121, #E940CD, #8A2387, #F27121)',
          animation: 'spin 1s linear infinite',
          WebkitMask: 'radial-gradient(circle, transparent 55%, black 56%)',
          mask: 'radial-gradient(circle, transparent 55%, black 56%)',
          '@keyframes spin': {
            '0%': { transform: 'rotate(0deg)' },
            '100%': { transform: 'rotate(360deg)' },
          },
        }}
      />

      {message && (
        <Typography
          variant="h6"
          sx={{
            fontFamily: 'Benzin-Bold',
            background:
              'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          {message}
        </Typography>
      )}
    </Box>
  );
};
