<script>
  import {
    create_button_manager,
    Button,
    create_text_input_manager,
    TextInput,
    copy_to_clipboard,
  } from "sveltekit-ui"

  let manager = $state(null)

  function create_manager() {
    let text_input_manager = $state()
    let copy_button_manager = $state()

    function init() {
      text_input_manager = create_text_input_manager({
        placeholder: "some text here",
      })
      copy_button_manager = create_button_manager({
        text: "Copy Text",
        is_compressed: true,
        is_success_animation: true,
        on_click: () => copy_to_clipboard(text_input_manager?.val),
      })
    }

    init()

    return {
      get text_input_manager() {
        return text_input_manager
      },
      get copy_button_manager() {
        return copy_button_manager
      },
    }
  }

  manager = create_manager()
</script>

<div style="margin: 1rem; display: flex; gap: 1rem;">
  <TextInput manager={manager?.text_input_manager} />
  <Button manager={manager?.copy_button_manager} />
</div>