import React from 'react';
import { Box } from '@mui/material';

interface CapePreviewProps {
  imageUrl: string;
  alt?: string;
}

export const CapePreview: React.FC<CapePreviewProps> = ({
  imageUrl,
  alt = 'Плащ',
}) => {
  return (
    <Box
      sx={{
        position: 'relative',
        width: '100%',
        height: 140, // фиксированная область под плащ
        overflow: 'hidden',
      }}
    >
      <Box
        component="img"
        src={imageUrl}
        alt={alt}
        sx={{
          width: '100%',
          height: '100%',
          imageRendering: 'pixelated',

          // Берём старый "зум" из CapeCard — плащ становится большим,
          // а лишнее обрезается контейнером.
          transform: 'scale(2.9) translateX(0px) translateY(0px)',
          transformOrigin: 'top left',
        }}
      />
    </Box>
  );
};
