<script lang="ts">
  import Input from '@components/input/Input.svelte';
  import Textarea from '@components/input/Textarea.svelte';
  import type { Feedback } from '@app/admin/feedback/feedback.ts';

  // types
  interface Props {
    feedback: Feedback | null;
  }

  // inputs
  let { feedback }: Props = $props();
</script>

<div
  class="absolute bottom-2 bg-base-200 rounded-lg w-[calc(100%-1rem)] mx-2 flex px-6 py-4 gap-10"
  hidden={feedback === null}
>
  <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={() => (feedback = null)}>✕</button>
  <div class="w-96">
    <Input value={feedback?.event} label="Event" readonly />
    <Input value={feedback?.title} label="Titel" readonly />
    <Input value={feedback?.username} label="Nutzer" readonly />
  </div>
  <div class="divider divider-horizontal"></div>
  <div class="w-full">
    <Textarea value={feedback?.content} label="Inhalt" rows={9} readonly dynamicWidth />
  </div>
</div>
