<script lang="ts">
  // v0.2 Phase 5 primitive — square icon-only button. Always carries a
  // visible aria-label so screen readers announce purpose. Optional
  // tooltip slot (rendered via native title for now; a tooltip primitive
  // pass in Phase 7 will swap to LumotiaTooltip where layout permits).
  type Size = "sm" | "md" | "lg";
  type Variant = "ghost" | "filled" | "destructive";

  // `icon` accepts both Svelte 5 `Component<…>` and the legacy
  // `SvelteComponentTyped` shape lucide-svelte still exports as of
  // 0.577.0. Type widened to keep call sites simple; the runtime
  // requires nothing more than a renderable Svelte component.
  // svelte-ignore: cross-version icon compat.
  /* eslint-disable @typescript-eslint/no-explicit-any */
  interface Props {
    icon: any;
    label: string;
    size?: Size;
    variant?: Variant;
    disabled?: boolean;
    type?: "button" | "submit" | "reset";
    onclick?: (e: MouseEvent) => void;
    classes?: string;
  }

  let {
    icon: Icon,
    label,
    size = "md" as Size,
    variant = "ghost" as Variant,
    disabled = false,
    type = "button",
    onclick,
    classes = "",
  }: Props = $props();

  const boxClass: Record<Size, string> = {
    sm: "size-7",
    md: "size-9",
    lg: "size-11",
  };
  const iconSize: Record<Size, number> = { sm: 14, md: 16, lg: 18 };

  const variantClass: Record<Variant, string> = {
    ghost: "bg-transparent text-text-secondary hover:bg-hover hover:text-text",
    filled: "bg-bg-elevated text-text border border-border-subtle hover:bg-hover",
    destructive: "bg-transparent text-danger hover:bg-danger/10",
  };
</script>

<button
  {type}
  class="rounded-md flex items-center justify-center select-none disabled:opacity-50 disabled:cursor-not-allowed
    {boxClass[size]}
    {variantClass[variant]}
    {classes}"
  style="transition-duration: var(--duration-ui)"
  aria-label={label}
  title={label}
  {disabled}
  {onclick}
>
  <Icon size={iconSize[size]} />
</button>
