"use client";

import { FormEvent } from "react";
import { useRouter } from "next/navigation";

type User = { id: string; name: string | null; email: string };

export function TeamForm({ users }: { users: User[] }) {
  const router = useRouter();

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    await fetch("/api/teams", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: form.get("name"), userIds: form.getAll("userIds") })
    });
    event.currentTarget.reset();
    router.refresh();
  }

  return (
    <form className="grid gap-3 rounded-lg border border-brand-secondary/20 bg-white p-5 shadow-sm" onSubmit={submit}>
      <h2 className="text-lg font-semibold">Create team</h2>
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="name" placeholder="Team name" required />
      <div className="grid gap-2 text-sm">
        {users.map((user) => (
          <label className="flex items-center gap-2" key={user.id}>
            <input name="userIds" type="checkbox" value={user.id} />
            {user.name ?? user.email}
          </label>
        ))}
      </div>
      <button className="brand-button-secondary" type="submit">Create team</button>
    </form>
  );
}