src/lib/components/Piclets/EmptySlotCard.svelte

<script lang="ts">
  interface Props {
    size?: number;
    isHighlighted?: boolean;
    onClick?: () => void;
  }
  
  let { size = 100, isHighlighted = false, onClick }: Props = $props();
</script>

<button 
  class="empty-slot"
  class:highlighted={isHighlighted}
  style="width: {size}px; height: {size + 30}px;"
  onclick={onClick}
  type="button"
>
  <svg 
    width="32" 
    height="32" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    stroke-width="2"
  >
    {#if isHighlighted}
      <circle cx="12" cy="12" r="10" />
      <path d="M12 8v8m-4-4h8" />
    {:else}
      <path d="M12 5v14m-7-7h14" />
    {/if}
  </svg>
</button>

<style>
  .empty-slot {
    background: #f5f5f5;
    border: 2px dashed #d1d1d6;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8e8e93;
    transition: all 0.2s;
  }
  
  .empty-slot:hover {
    background: #e5e5ea;
  }
  
  .empty-slot:active {
    transform: scale(0.95);
  }
  
  .empty-slot.highlighted {
    background: rgba(0, 123, 255, 0.1);
    border-color: #007bff;
    color: #007bff;
  }
</style>