import React from 'react';
import Box from '@mui/material/Box';
import CardMedia from '@mui/material/CardMedia';
import Images from './Images.js';

const ProductImage = ({ 
  product, 
  fullscreenOpen, 
  onOpenFullscreen, 
  onCloseFullscreen
}) => {
  // Container styling - unified for all versions
  const containerSx = {
    width: { xs: "100%", sm: "555px" },
    maxWidth: "100%",
    minHeight: "400px",
    background: "#f8f8f8",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  };

  return (
    <Box sx={containerSx}>
      {!product.pictureList && (
        <CardMedia
          component="img"
          height="400"
          image="/assets/images/nopicture.jpg"
          alt={product.name}
          fetchPriority="high"
          loading="eager"
          onError={(e) => {
            // Ensure alt text is always present even on error
            if (!e.target.alt) {
              e.target.alt = product.name || 'Produktbild';
            }
          }}
          sx={{ objectFit: "cover" }}
        />
      )}
      {product.pictureList && (
        <Images
          pictureList={product.pictureList}
          productName={product.name}
          fullscreenOpen={fullscreenOpen}
          onOpenFullscreen={onOpenFullscreen}
          onCloseFullscreen={onCloseFullscreen}
        />
      )}
    </Box>
  );
};

export default ProductImage;