import React, { useState } from "react";

interface EmptyStateProps {
  onAdd?: (title: string) => void;
}

export default function EmptyState({ onAdd }: EmptyStateProps) {
  const [showForm, setShowForm] = useState(false);
  const [title, setTitle] = useState("");

  const handleAdd = () => {
    if (title.trim() && onAdd) {
      onAdd(title.trim());
      setTitle("");
      setShowForm(false);
    }
  };

  return (
    <div className="text-center py-20">
      <h2 className="text-xl font-semibold">Aucune donnée pour l’instant</h2>
      <p className="text-gray-500">Commencez en créant votre première entrée</p>
      {!showForm ? (
        <button
          className="mt-4 px-4 py-2 bg-blue-600 text-white rounded"
          onClick={() => setShowForm(true)}
        >
          + Ajouter une donnée
        </button>
      ) : (
        <div className="mt-4 flex flex-col items-center gap-2">
          <input
            className="border px-2 py-1 rounded"
            placeholder="Titre de la donnée"
            value={title}
            onChange={e => setTitle(e.target.value)}
          />
          <div className="flex gap-2">
            <button
              className="px-4 py-2 bg-blue-600 text-white rounded"
              onClick={handleAdd}
            >
              Créer
            </button>
            <button
              className="px-4 py-2 bg-gray-300 text-gray-700 rounded"
              onClick={() => setShowForm(false)}
            >
              Annuler
            </button>
          </div>
        </div>
      )}
    </div>
  );
}