components/form.tsx

"use client";

import { useState } from "react";
import classNames from "classnames";

import { Input } from "./input";
import { Select } from "./select";

interface Props {
  loading: boolean;
  onSubmit: (form: FormProps) => void;
}

export interface FormProps {
  username?: string;
  language: Language;
}
export type Language = "en" | "fr" | "es";

export const Form: React.FC<Props> = ({ loading, onSubmit }) => {
  const [form, setForm] = useState<FormProps>({
    username: undefined,
    language: "en",
  });

  return (
    <main className="grid grid-cols-1 gap-6">
      <div>
        <p className="font-semibold text-xs uppercase mb-2 text-zinc-600">
          Hugging Face username
        </p>
        <Input
          value={form.username}
          onChange={(value) => setForm({ ...form, username: value })}
        />
      </div>
      <div>
        <p className="font-semibold text-xs uppercase mb-2 text-zinc-600">
          Language
        </p>
        <Select
          value={form.language}
          onChange={(value) => setForm({ ...form, language: value })}
        />
      </div>
      <div className="flex justify-end">
        <button
          className={classNames(
            "bg-black rounded-full px-5 py-2.5 text-base font-medium text-white hover:bg-zinc-800 disabled:bg-zinc-300 disabled:text-zinc-500 disabled:cursor-not-allowed",
            {
              "animate-pulse": loading,
            }
          )}
          disabled={!form.username || loading}
          onClick={() => onSubmit(form)}
        >
          {loading ? "Roasting in progress..." : "Roast this Hugger 🔥"}
        </button>
      </div>
    </main>
  );
};