import { useState } from "react";

function NewArtist() {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch("http://localhost:8000/artist", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name }),
    })
      .then((res) => res.json())
      .then((data) => {
        setMessage(data.message);
        setName("");
      })
      .catch(() => setMessage("Hiba történt a mentés során!"));
  };

  return (
    <div className="p-6 max-w-sm mt-6">
      <h2 className="text-xl mb-4">Új előadó hozzáadása</h2>
      <form onSubmit={handleSubmit} className="flex flex-col gap-3">
        <label className="text-sm text-gray-600">Előadó neve:</label>
        <input
          type="text"
          placeholder="Előadó neve"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="border border-gray-400 px-3 py-1 text-sm"
          required
        />
        <button
          type="submit"
          className="border border-gray-400 bg-gray-100 px-4 py-1 text-sm hover:bg-gray-200 cursor-pointer"
        >
          Mentés
        </button>
      </form>
      {message && (
        <p className="mt-3 text-green-700 text-sm">{message}</p>
      )}
    </div>
  );
}

export default NewArtist;
