import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'

function Eloadok() {
    const [elemek, setElemek] = useState([]);

    useEffect(() => {
        fetch("http://localhost:8000/artists")
            .then(resp => resp.json())
            .then(data => setElemek(data))
            .catch(error => console.log(error));
    }, []);

    return (
        <div className="min-h-screen px-4 py-6" style={{backgroundImage: "url('/bg.jpg')", backgroundSize: "100% auto", backgroundRepeat: "repeat-y"}}>
            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {elemek.map((eloado) => (
                    <div key={eloado.ArtistId} className="bg-gray-300 rounded-lg shadow-lg px-6 py-4">
                        <h2 className="text-xl font-semibold text-gray-800">{eloado.Name}</h2>
                    </div>
                ))}
            </div>
            <div className="mt-6 text-center">
                <Link to="/" className="text-blue-600 hover:underline">Főoldal</Link>
            </div>
        </div>
    )
}

export default Eloadok