"use client";
import { useState } from "react";

export default function CreateTeamForm({ onSubmit }) {
  const [name, setName] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!name.trim()) {
      return; // Don't submit if name is empty
    }

    setSubmitting(true);

    try {
      await onSubmit({ name });
    } catch (error) {
      console.error("Error submitting form:", error);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="mb-6">
      <div className="mb-4">
        <label htmlFor="teamName" className="block text-gray-700 mb-2">
          Team Name
        </label>
        <input
          type="text"
          id="teamName"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          placeholder="Enter team name"
          required
        />
      </div>

      <button
        type="submit"
        disabled={submitting}
        className={`px-4 py-2 rounded text-white ${
          submitting
            ? "bg-gray-400 cursor-not-allowed"
            : "bg-blue-500 hover:bg-blue-600"
        }`}
      >
        {submitting ? "Creating..." : "Create Team"}
      </button>
    </form>
  );
}