import { useState } from 'react'

const NewArtist = () => {
    const [nev, setNev] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        fetch("http://localhost:8000/artist", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name: nev })
        })
            .then(resp => resp.json())
            .then(adat => { alert(adat.message); setNev(""); })
            .catch(error => console.log(error));
    }

    return (
        <div className="container mx-auto my-5 max-w-md">
            <h2 className="text-center mb-4 text-2xl font-bold">Új előadó hozzáadása</h2>
            <form onSubmit={handleSubmit} className="flex flex-col gap-3">
                <input
                    value={nev}
                    onChange={(e) => setNev(e.target.value)}
                    placeholder="Előadó neve"
                    className="border rounded px-3 py-2"
                    required
                />
                <button type="submit" className="bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700">
                    Mentés
                </button>
            </form>
        </div>
    )
}

export default NewArtist
