<script lang="ts">
  import type {Snippet} from "svelte"

  const {
    children,
    onclick,
    type = "button",
    ...restProps
  }: {
    children: Snippet
    onclick?: (event: Event) => any
    type?: "button" | "submit"
    class?: string
    style?: string
    disabled?: boolean
    "data-tip"?: string
    "aria-pressed"?: boolean
  } = $props()

  const className = $derived(
    `text-left cursor-pointer motion-safe:transition-transform motion-safe:duration-150 motion-safe:active:scale-[0.97] ${restProps.class}`,
  )

  const onClick = (e: Event) => {
    e.preventDefault()
    e.stopPropagation()

    onclick?.(e)
  }
</script>

{#if type === "submit"}
  <button {...restProps} {type} class={className}>
    {@render children?.()}
  </button>
{:else}
  <button {...restProps} onclick={onClick} type={type as "button" | "submit"} class={className}>
    {@render children?.()}
  </button>
{/if}
