---
interface Props {
  showSizeSelector?: boolean;
  showViewSelector?: boolean;
  className?: string;
}

const {
  showSizeSelector = true,
  showViewSelector = true,
  className = "",
} = Astro.props;
---

<div class={`flex items-center gap-4 ${className}`}>
  {showSizeSelector && (
    <div class="flex items-center gap-2">
      <span class="text-sm zag-text-muted hidden sm:inline">Size:</span>
      <div class="size-selector flex items-center gap-1 border-2 border-solid zag-border-b rounded-lg p-1 zag-bg zag-transition">
        <button 
          @click="setIconSize('small')" 
          :class="iconSize === 'small' ? 'active-size' : 'inactive-size'"
          class="p-1.5 transition-all rounded-md focus:outline-none focus:ring-2 focus:ring-current"
          aria-label="Small icons"
          title="Small icons (Alt+1)"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
          </svg>
        </button>
        <button 
          @click="setIconSize('medium')" 
          :class="iconSize === 'medium' ? 'active-size' : 'inactive-size'"
          class="p-1.5 transition-all rounded-md focus:outline-none focus:ring-2 focus:ring-current"
          aria-label="Medium icons"
          title="Medium icons (Alt+2)"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
          </svg>
        </button>
        <button 
          @click="setIconSize('large')" 
          :class="iconSize === 'large' ? 'active-size' : 'inactive-size'"
          class="p-1.5 transition-all rounded-md focus:outline-none focus:ring-2 focus:ring-current"
          aria-label="Large icons"
          title="Large icons (Alt+3)"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
          </svg>
        </button>
      </div>
    </div>
  )}
  
  {showViewSelector && (
    <div class="flex items-center gap-2">
      <span class="text-sm zag-text-muted hidden sm:inline">View:</span>
      <div class="view-selector border-2 border-solid zag-border-b rounded-lg p-1 zag-bg zag-transition">
        <button 
          @click="toggleViewMode" 
          :class="viewMode === 'grid' ? 'active-view' : 'inactive-view'"
          class="p-1.5 transition-all rounded-md focus:outline-none focus:ring-2 focus:ring-current"
          aria-label="Toggle view mode"
          :title="viewMode === 'grid' ? 'Switch to list view (Alt+G)' : 'Switch to grid view (Alt+G)'"
        >
          <svg x-show="viewMode === 'grid'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="7" height="7"></rect>
            <rect x="14" y="3" width="7" height="7"></rect>
            <rect x="14" y="14" width="7" height="7"></rect>
            <rect x="3" y="14" width="7" height="7"></rect>
          </svg>
          <svg x-show="viewMode === 'list'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="8" y1="6" x2="21" y2="6"></line>
            <line x1="8" y1="12" x2="21" y2="12"></line>
            <line x1="8" y1="18" x2="21" y2="18"></line>
            <line x1="3" y1="6" x2="3.01" y2="6"></line>
            <line x1="3" y1="12" x2="3.01" y2="12"></line>
            <line x1="3" y1="18" x2="3.01" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>
  )}
</div>

<style>
  .size-selector, .view-selector {
    box-shadow: 2px 2px 0 var(--color-zag-dark);
    :where(.dark, .dark *) & {
      box-shadow: 2px 2px 0 var(--color-zag-light);
    }
  }
  
  .active-size, .active-view {
    color: var(--color-zag-dark);
    background-color: var(--color-zag-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    :where(.dark, .dark *) & {
      color: var(--color-zag-dark);
    }
  }
  
  .inactive-size, .inactive-view {
    color: var(--color-zag-dark-muted);
    :where(.dark, .dark *) & {
      color: var(--color-zag-light-muted);
    }
  }
  
  .inactive-size:hover, .inactive-view:hover {
    background-color: var(--color-zag-light-muted);
    color: var(--color-zag-dark);
    :where(.dark, .dark *) & {
      background-color: var(--color-zag-dark-muted);
      color: var(--color-zag-light);
    }
  }
</style>