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

const ProductImage = ({ 
  product, 
  socket, 
  socketB, 
  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"
          sx={{ objectFit: "cover" }}
        />
      )}
      {product.pictureList && (
        <Images
          socket={socket}
          socketB={socketB}
          pictureList={product.pictureList}
          productName={product.name}
          fullscreenOpen={fullscreenOpen}
          onOpenFullscreen={onOpenFullscreen}
          onCloseFullscreen={onCloseFullscreen}
        />
      )}
    </Box>
  );
};

export default ProductImage;