<script lang="ts">
  import type { HTMLButtonAttributes } from "svelte/elements";
  import IconGlyph from "./IconGlyph.svelte";

  type ButtonProps = Omit<HTMLButtonAttributes, "type"> & {
    label: string;
    variant?: "primary" | "secondary" | "danger" | "ghost";
    size?: "default" | "compact";
    icon?: string;
    loading?: boolean;
    type?: "button" | "submit" | "reset";
  };

  let {
    label,
    variant = "primary",
    size = "default",
    icon,
    disabled = false,
    loading = false,
    type = "button",
    class: className = "",
    ...buttonProps
  }: ButtonProps = $props();
</script>

<button
  {...buttonProps}
  class={className ? `ui-button ${className}` : "ui-button"}
  data-variant={variant}
  data-size={size}
  data-loading={loading}
  {disabled}
  {type}
>
  {#if icon}
    <IconGlyph name={icon} size="sm" />
  {/if}
  <span>{loading ? "Loading" : label}</span>
</button>

<style>
  .ui-button {
    display: inline-grid;
    grid-auto-flow: column;
    gap: var(--ui-space-2);
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border: var(--ui-border);
    background: var(--ui-color-accent);
    color: var(--ui-color-canvas);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0;
    padding: 0 var(--ui-space-4);
    text-transform: uppercase;
  }

  .ui-button[data-size="compact"] {
    min-height: 2rem;
    padding-inline: var(--ui-space-3);
  }

  .ui-button[data-variant="secondary"] {
    background: var(--ui-color-surface-raised);
    color: var(--ui-color-text);
  }

  .ui-button[data-variant="danger"] {
    background: var(--ui-color-danger);
    color: var(--ui-color-text);
  }

  .ui-button[data-variant="ghost"] {
    background: transparent;
    color: var(--ui-color-muted);
  }

  .ui-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
  }
</style>
