"use client";

import { FormEvent, useState } from "react";

export function ContactForm() {
  const [sent, setSent] = useState(false);

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSent(true);
  };

  return (
    <form className="contact-form" onSubmit={onSubmit}>
      <label className="contact-form__field">
        <span>نام</span>
        <input name="name" type="text" placeholder="نام شما" required />
      </label>

      <label className="contact-form__field">
        <span>شماره تماس</span>
        <input
          name="phone"
          type="tel"
          inputMode="tel"
          placeholder="۰۹۱۲..."
          required
        />
      </label>

      <label className="contact-form__field">
        <span>پیام</span>
        <textarea
          name="message"
          rows={4}
          placeholder="پیام خود را بنویسید..."
          required
        />
      </label>

      <button type="submit" className="contact-form__submit">
        ارسال پیام
      </button>

      {sent ? (
        <p className="contact-form__success" role="status">
          پیام نمونه ثبت شد. بعداً به سیستم واقعی وصل می‌شود.
        </p>
      ) : null}
    </form>
  );
}
