"use client";

import { FormEvent, useState } from "react";

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

  function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSent(true);
    event.currentTarget.reset();
  }

  return (
    <form onSubmit={onSubmit} className="form-1 mb-3">
      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
        <div className="relative pt-2">
          <label htmlFor="name">نام</label>
          <input type="text" name="name" id="name" required />
        </div>
        <div className="relative pt-2">
          <label htmlFor="email">ایمیل</label>
          <input type="email" name="email" id="email" required />
        </div>
        <div className="relative pt-2">
          <label htmlFor="cell_number">شماره همراه</label>
          <input type="tel" name="cell_number" id="cell_number" required />
        </div>
        <div className="relative pt-2">
          <label htmlFor="subject">موضوع</label>
          <input type="text" name="title" id="subject" required />
        </div>
        <div className="relative pt-2 lg:col-span-2">
          <label htmlFor="message">متن پیام</label>
          <textarea name="message" id="message" rows={4} required />
        </div>
        <div className="text-start lg:col-span-2">
          <button type="submit" className="button-style-2 p-0 pb-1">
            ارسال پیام
            <i className="WMi-left-chevron" />
          </button>
          {sent && (
            <p className="mt-4 text-sm text-primary">پیام شما با موفقیت ثبت شد.</p>
          )}
        </div>
      </div>
    </form>
  );
}