<script lang="ts">
  import Icon from './Icon.svelte';

  interface Props {
    icon: string;
    label: string;
    size?: number | string;
    class?: string;
    active?: boolean;
    disabled?: boolean;
    onclick?: () => void;
  }

  let {
    icon,
    label,
    size = 16,
    class: className = '',
    active = false,
    disabled = false,
    onclick
  }: Props = $props();
</script>

<button
  class="icon-button {className}"
  class:active={active}
  class:disabled={disabled}
  {onclick}
  {disabled}
  aria-label={label}
  title={label}
>
  <Icon name={icon} {size} />
</button>

<style>
  .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--fog-border, #e5e7eb);
    border-radius: 0.25rem;
    background: var(--fog-post, #ffffff);
    color: var(--fog-text, #1f2937);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    line-height: 1.5;
    gap: 0.375rem;
  }

  :global(.dark) .icon-button {
    background: var(--fog-dark-post, #1f2937);
    border-color: var(--fog-dark-border, #374151);
    color: var(--fog-dark-text, #f9fafb);
  }

  .icon-button:hover:not(.disabled) {
    background: var(--fog-highlight, #f3f4f6);
    border-color: var(--fog-accent, #64748b);
  }

  :global(.dark) .icon-button:hover:not(.disabled) {
    background: var(--fog-dark-highlight, #374151);
  }

  .icon-button.active {
    background: var(--fog-accent, #64748b);
    color: var(--fog-text, #ffffff);
    border-color: var(--fog-accent, #64748b);
  }

  :global(.dark) .icon-button.active {
    background: var(--fog-dark-accent, #64748b);
    color: var(--fog-dark-text, #ffffff);
    border-color: var(--fog-dark-accent, #64748b);
  }

  .icon-button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .icon-button:focus-visible {
    outline: 2px solid var(--fog-accent, #64748b);
    outline-offset: 2px;
  }
</style>
