<script lang="ts">
  import * as Dialog from "$lib/components/ui/dialog/index.js";

  export let open: boolean = false;
</script>

<Dialog.Root bind:open>
  <Dialog.Content class="sm:max-w-[425px]">
    <Dialog.Header>
      <Dialog.Title>Settings</Dialog.Title>
      <Dialog.Description>
        Configure your application settings
      </Dialog.Description>
    </Dialog.Header>

    <div class="py-4">
      <h1 class="text-lg font-medium">hi</h1>
    </div>

    <Dialog.Footer>
      <Dialog.Close asChild let:builder>
        <button use:builder class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded">
          Close
        </button>
      </Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>
