<script lang="ts">
  import { enhance } from '$app/forms';
  import { Button } from 'bits-ui';
  import IconDeviceFloppy from '~icons/tabler/device-floppy';
  import IconTrash from '~icons/tabler/trash';
  import IconX from '~icons/tabler/x';

  let { children, createOnly } = $props();
</script>

<div class="w-full sm:px-6 px-3 py-4 max-w-xl mx-auto mb-12">
  <form method="POST" action="?/update" use:enhance>
    {@render children()}

    <div class="flex gap-2 justify-between sm:text-base text-sm">
      <div class="flex gap-2">
        <Button.Root
          type="submit"
          class="flex items-center gap-2 text-black cursor-pointer
            bg-neutral-100 hover:bg-neutral-400 hover:scale-95 transition-all duration-300 ease-in-out
            rounded-full py-2 px-4 border border-neutral-100"
        >
          <IconDeviceFloppy />
          <p>Save</p>
        </Button.Root>

        <Button.Root
          type="button"
          onclick={() => history.back()}
          class="flex items-center gap-2 text-white cursor-pointer
            bg-neutral-800 hover:bg-neutral-700 hover:scale-95 transition-all duration-300 ease-in-out
            rounded-full py-2 px-4 border border-neutral-600"
        >
          <IconX />
          <p>Cancel</p>
        </Button.Root>
      </div>

      {#if !createOnly}
        <Button.Root
          formaction="?/delete"
          class="flex items-center gap-2 text-white cursor-pointer
            bg-red-700 hover:bg-red-500 hover:scale-95 transition-all duration-300 ease-in-out
            rounded-full py-2 px-4 border border-red-500"
        >
          <IconTrash />
          <p>Delete</p>
        </Button.Root>
      {/if}
    </div>
  </form>
</div>
