import React from "react";
import "./CombinationGrid.css";

const CombinationGrid = ({ combination }) => {
  if (!Array.isArray(combination)) {
    return null; // combinations가 배열이 아닐 경우 아무것도 렌더링하지 않음
  }

  return (
    <div className="combination-grid">
      {combination.map((combo, index) => (
        <div key={index} className="combination-card">
            <img src={combo.image_url} alt={combo.title} className="card-image" />
          <h2 className="card-title">
            <div className="part-type">
              {combo.partType}
            </div>
            <div>
              {combo.title}
            </div>
          </h2>
          <p className="card-description">
            {combo.description}
          </p>
        </div>
      ))}
    </div>
  );
};

export default CombinationGrid;