"use client";
import { Input } from "~/components/ui/input";
import SubmitButton from "../SubmitButton";
import { useActionState } from "react";
import { addRegion } from "~/server/actions/addRegion";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";
import { useFormState } from "react-dom";

interface Country {
  id: string;
  name: string;
}

export default function CreateRegionForm(props: { countries: Country[] }) {
  const [state, formAction] = useFormState(addRegion, null);
  const { countries } = props;
  return (
    <form action={formAction}>
      <Input name="name" />
      <Select name="country">
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Country" />
        </SelectTrigger>
        <SelectContent>
          {countries.map((country) => (
            <SelectItem key={country.id} value={country.id}>
              {country.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <SubmitButton text={"Region"} />
      <span>{state?.message}</span>
    </form>
  );
}