---
import { Image } from 'astro:assets';
const { name, email, purpose, amount, date, notes, receipt } = Astro.props;
---

<section class="p-20 bg-white dark:bg-gray-900 flex items-center justify-center gap-20 flex-wrap">
    <div class="max-h-[50vh] w-auto">
        {receipt && <img class="w-auto h-auto max-h-[50vh]" src={receipt} alt="Receipt for expense" />}
        
    </div>
  <div class="w-auto max-w-2xl lg:py-16">
      <h2 class="mb-2 text-xl font-semibold leading-tight text-gray-900 md:text-2xl dark:text-white">{purpose}</h2>
      <p class="mb-4 text-xl font-extrabold leading-tight text-gray-900 md:text-2xl dark:text-white">${amount}</p>
      <dl class="flex flex-col items-flex-start space-x-6">
          <div>
              <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Name</dt>
              <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{name}</dd>
          </div>
          <div>
              <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Contact</dt>
              <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{email}</dd>
          </div>
                    <div>
              <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Date</dt>
              <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{date}</dd>
          </div>
          <div>
              <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Notes</dt>
              <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{notes}</dd>
          </div>
      </dl>
      <dl class="flex items-center space-x-6">

      </dl>

  </div>
</section>