"use client";

import { useState, type FormEvent } from "react";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { useToast } from "@/context/toast-context";

export function ContactForm() {
  const { toast } = useToast();
  const [sending, setSending] = useState(false);

  const onSubmit = (event: FormEvent) => {
    event.preventDefault();
    setSending(true);
    window.setTimeout(() => {
      setSending(false);
      toast("Message sent — we'll reply soon");
      (event.target as HTMLFormElement).reset();
    }, 700);
  };

  return (
    <form
      onSubmit={onSubmit}
      className="space-y-4 rounded-[1.35rem] border border-border bg-card p-5 sm:p-7"
    >
      <Input label="Name" name="name" required />
      <Input label="Email" name="email" type="email" required />
      <label className="block">
        <span className="mb-2 block text-sm font-medium">Message</span>
        <textarea
          name="message"
          required
          rows={5}
          className="w-full rounded-2xl border border-border bg-background px-4 py-3 text-sm outline-none transition focus:border-foreground"
        />
      </label>
      <Button type="submit" disabled={sending}>
        {sending ? "Sending..." : "Send message"}
      </Button>
    </form>
  );
}