---
import type { db } from '@db/database.ts';
import Textarea from '@components/input/Textarea.svelte';

interface Props {
  report: Awaited<ReturnType<db.getReportByUrlHash>>;
}

const { report } = Astro.props;
---

<div class="flex justify-center items-center">
  <div class="mt-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
    {
      report.status?.status == null ? (
        <p>Dein Report wird in kürze bearbeitet</p>
      ) : report.status?.status === 'open' ? (
        <p>Dein Report befindet sich in Bearbeitung</p>
      ) : (
        <>
          <p>Dein Report wurde bearbeitet</p>
          <Textarea
            value={report.status?.statement}
            label="Antwort vom Admin Team (optional)"
            rows={5}
            dynamicWidth
            readonly
          />
        </>
      )
    }
  </div>
</div>