import React from 'react';

// Composant Image atomique
const Image = ({ src, alt }) => {
  return <img src={src} alt={alt} style={{ display: 'block', margin: 'auto' }} />;
};

// Composant Description atomique
const Description = ({ title, children }) => {
  return (
    <div className="description">
      <h2>{title}</h2>
      {children}
    </div>
  );
};

// Composant Caractéristique atomique
const Characteristic = ({ label, value }) => {
  return (
    <div className="characteristic">
      <strong>{label}:</strong> {value}
    </div>
  );
};

// Composant Détails du Produit (combinaison atomique)
export const ItemBox = ({ imageUrl, model, brand, purchaseDate, price, onEdit }) => {
  return (
    <div className="product-details">
      <Image src={imageUrl} alt="Product" />
      <Description title="Product Information">
        <Characteristic label="Model" value={model} />
        <Characteristic label="Brand" value={brand} />
        <Characteristic label="Purchase Date" value={purchaseDate} />
        <Characteristic label="Price" value={price} />
      </Description>
      <button onClick={onEdit}>Edit</button>
    </div>
  );
};