import { useState } from "react";
import { sculptureList } from "./data.js";

const Gallery = () => {
  const [index, setIndex] = useState(0);

  const handleClick = () => {
    // index = index + 1;
    setIndex(index + 1);
  };

  let sculpture = sculptureList[index];
  return (
    <section>
      <button onClick={handleClick}>Next</button>
      <h2>
        <i>{sculpture.name} </i> by {sculpture.description}{" "}
      </h2>
      <h3>
        {index + 1} of {sculptureList.length}
      </h3>
      <img src={sculpture.url} alt={sculpture.alt} />
      <p>{sculpture.description}</p>
    </section>
  );
};

export default Gallery;