<script lang="ts">
  export let subject: string;
  export let body: string;
</script>

<form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
  <h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
  <label class="flex flex-col text-gray-700">
    Subject
    <input
      type="text"
      bind:value={subject}
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
      required
    />
  </label>
  <label class="flex flex-col text-gray-700">
    Body
    <textarea
      bind:value={body}
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
      rows="6"
      required
    ></textarea>
  </label>
</form>