import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import bgImage from "../assets/bg.jpg";

function Eloadok() {
  const [artists, setArtists] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("http://localhost:8000/artists")
      .then((res) => res.json())
      .then((data) => {
        setArtists(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p className="text-center mt-10">Betöltés...</p>;
  if (error) return <p className="text-center mt-10 text-red-500">Hiba: {error}</p>;

  return (
    <div
      className="relative bg-cover bg-center min-h-[60vh] p-6"
      style={{ backgroundImage: `url(${bgImage})` }}
    >
      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {artists.map((artist) => (
          <div
            key={artist.ArtistId}
            className="bg-gray-500 bg-opacity-70 text-white p-4 rounded flex items-center justify-between"
          >
            <span className="font-semibold">{artist.Name}</span>
            <img
              src="/musical-note-flat-icon-png.png"
              alt="hangjegy"
              className="w-12 h-12 opacity-60"
            />
          </div>
        ))}
      </div>
      <div className="text-center mt-6">
        <Link
          to="/"
          className="text-white bg-gray-600 bg-opacity-70 px-4 py-2 rounded hover:bg-opacity-90"
        >
          Vissza a főoldalra
        </Link>
      </div>
    </div>
  );
}

export default Eloadok;
