<section className="flex h-full flex-col items-center bg-gray-300 py-16">
  <form
    className="flex w-full max-w-[500px] flex-col items-center gap-2 py-2"
    action={handleSubscription}
    method="POST"
  >
    <h2 className="flex flex-row items-center text-2xl font-bold">
      <NewspaperIcon className="mr-3 h-11 w-11" />
      Subscribe to our Newsletter!
    </h2>
    <p className="text-gray-500">Subscribe to our newsletter and stay updated.</p>
    <input
      type="email"
      name="email"
      placeholder="Your email"
      required
      className="w-3/4 border p-2 focus-within:outline-blue-200"
    />
    <button
      role="submit"
      className="w-3/4 bg-blue-400 p-2 text-white outline-offset-2 focus:outline-blue-200"
    >
      Subscribe
    </button>
  </form>
</section>

const handleSubscription = async (formData: FormData) => {
  'use server'

  const email = formData.get('email') as string
  await subscription(email)
  revalidatePath('/')
}

const API_KEY = String(process.env.MAILGUN_API_KEY) || ''
const DOMAIN = String(process.env.MAILGUN_DOMAIN) || ''

const mailgun = new Mailgun(FormData)
const client = mailgun.client({
  username: 'api',
  key: API_KEY,
})

export default async function subscription(email: string) {
  if (email === null) return
  const messageData = {
    from: 'Contact Form <[NAME]@[MAILGUN_ADDRESS].mailgun.org>',
    to: String(email),
    subject: 'Thank You For Your Subscription!',
    text: `
          Thank you for subscribing to our newsletter at ${email}!

          We're thrilled to have you as part of our community. 
          You'll now receive regular updates, exclusive offers, 
          and valuable insights directly to your inbox. If you ever have any questions or feedback, 
          please don't hesitate to reach out to us.

          Welcome aboard!
        `,
  }

  try {
    const mailResponse = await client.messages.create(DOMAIN, messageData)
    return mailResponse
  } catch (error) {
    console.log(error)
    return
  }
}

'use server'

import Mailgun from 'mailgun.js'
import FormData from 'form-data'

const API_KEY = String(process.env.MAILGUN_API_KEY) || ''
const DOMAIN = String(process.env.MAILGUN_DOMAIN) || ''

const mailgun = new Mailgun(FormData)
const client = mailgun.client({
  username: 'api',
  key: API_KEY,
})

export default async function subscription(email: string) {
  if (email === null) return
  const messageData = {
    from: 'Contact Form <[NAME]@[MAILGUN_ADDRESS].mailgun.org>',
    to: String(email),
    subject: 'Thank You For Your Subscription!',
    text: `
          Thank you for subscribing to our newsletter at ${email}!

          We're thrilled to have you as part of our community. 
          You'll now receive regular updates, exclusive offers, 
          and valuable insights directly to your inbox. If you ever have any questions or feedback, 
          please don't hesitate to reach out to us.

          Welcome aboard!
        `,
  }

  try {
    const mailResponse = await client.messages.create(MAILGUN_DOMAIN, messageData)
    return mailResponse
  } catch (error) {
    console.log(error)
    return
  }
}