import { useState, useEffect } from 'react'
import RoastCard from './RoastCard'

export default function RoastGallery() {
  const [roasts, setRoasts] = useState([])

  useEffect(() => {
    fetch('/roasts.json')
      .then((res) => res.json())
      .then((data) => setRoasts(data))
      .catch((err) => console.error('Failed to load roasts:', err))
  }, [])

  return (
    <section className="max-w-7xl mx-auto px-4 py-12">
      <h2 className="text-3xl font-bold text-center mb-8 text-gray-800">
        📸 Phd hoá học
      </h2>
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
        {roasts.map((roast, index) => (
          <RoastCard
            key={index}
            image={roast.image}
            caption={roast.caption}
          />
        ))}
      </div>
    </section>
  )
}
