// src/renderer/components/CapePreviewModal.tsx
import React from 'react';
import {
  Dialog,
  DialogContent,
  IconButton,
  Box,
  Typography,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import SkinViewer from './SkinViewer';

interface CapePreviewModalProps {
  open: boolean;
  onClose: () => void;
  capeUrl: string;
  skinUrl?: string;
}

const CapePreviewModal: React.FC<CapePreviewModalProps> = ({
  open,
  onClose,
  capeUrl,
  skinUrl,
}) => {
  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth
    sx={{
      '& .MuiPaper-root': {
        backgroundColor: 'transparent',
        borderRadius: '2vw',
      },
    }}>
      <DialogContent
        sx={{
          bgcolor: 'rgba(5, 5, 15, 0.96)',
          position: 'relative',
          p: 2,
        }}
      >
        <IconButton
          onClick={onClose}
          sx={{
            position: 'absolute',
            top: 8,
            right: 8,
            color: 'white',
          }}
        >
          <CloseIcon />
        </IconButton>

        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 2,
          }}
        >
          <Typography
            sx={{
              fontFamily: 'Benzin-Bold',
              color: 'white',
              fontSize: '1.1rem',
            }}
          >
            Предпросмотр плаща
          </Typography>

          <SkinViewer
            width={350}
            height={450}
            capeUrl={capeUrl} // скин возьмётся дефолтный из SkinViewer
            skinUrl={skinUrl}
            autoRotate={true}
            walkingSpeed={0.5}
          />
        </Box>
      </DialogContent>
    </Dialog>
  );
};

export default CapePreviewModal;
