import type { ContactSetting } from "@prisma/client";
import { submitContactAction } from "@/lib/actions";
import { ContactDetails } from "@/components/site/ContactDetails";

export function ContactSection({ contact, showSuccess = false }: { contact: ContactSetting | null; showSuccess?: boolean }) {
  return (
    <div className="contact-section-pro">
      <div className="contact-page-hero">
        <span className="pill">Contact</span>
        <h1 className="section-title">Let&apos;s Build Something Great Together</h1>
        <p className="muted">
          Have an idea, collaboration, sponsorship, local blog topic, or a project for Just Chill Nepal?
          Send a message and I&apos;ll get back to you soon.
        </p>
      </div>
      <div className="contact-top-grid">
        <ContactDetails contact={contact} />

        <form action={submitContactAction} className="contact-form-pro">
          <div>
            <span className="pill">Message</span>
            <h2>Send Me a Message</h2>
            <p className="muted">Fill out the form below and I&apos;ll reply as soon as possible.</p>
          </div>
          {showSuccess ? (
            <div className="contact-success-message" role="status">
              <strong>Thank you for your message!</strong>
              <span>Your message has been received successfully. I&apos;ll get back to you soon.</span>
            </div>
          ) : null}
          <div className="contact-form-row">
            <label className="field">
              Full Name
              <input name="name" placeholder="Enter your full name" required />
            </label>
            <label className="field">
              Phone
              <input name="phone" placeholder="+977 98XXXXXXXX" required />
            </label>
          </div>
          <label className="field">
            Email
            <input name="email" placeholder="your@email.com" required type="email" />
          </label>
          <label className="field">
            Message
            <textarea name="message" placeholder="Write your message here..." required />
          </label>
          <button className="btn contact-submit" type="submit">Send Message</button>
        </form>
      </div>

    </div>
  );
}