// AlbumGrid.jsx — 4-up audio album squares.

const AlbumGrid = ({ items = defaultAlbums, onPlay = () => {} }) => (
  <div style={agStyles.grid}>
    {items.map((it, i) => (
      <article key={i} style={agStyles.card}>
        <div style={{ ...agStyles.cover, background: it.bg || "#D8D8DC" }}>
          {it.img && <img src={it.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
          <button style={agStyles.play} aria-label="Play" onClick={() => onPlay(i)}>
            <Icon name="play-lg" size={48} />
          </button>
        </div>
        <h3 style={agStyles.title}>{it.title}</h3>
      </article>
    ))}
  </div>
);

const defaultAlbums = [
  { title: "Music for the Soul" },
  { title: "Violin & Piano Duo" },
  { title: "Jewish Music" },
  { title: "Original Compositions" },
];

const agStyles = {
  grid: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 },
  card: { display: "flex", flexDirection: "column", gap: 10 },
  cover: { position: "relative", width: "100%", aspectRatio: "1/1", borderRadius: 12, overflow: "hidden", background: "linear-gradient(135deg,#FEEECC,#FDF294)" },
  play: { position: "absolute", inset: 0, margin: "auto", width: 48, height: 48, background: "transparent", border: 0, cursor: "pointer", padding: 0 },
  title: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontSize: 13, fontWeight: 700, color: "#171717", lineHeight: 1.3 },
};

window.AlbumGrid = AlbumGrid;