<script lang="ts">
  import type { PicletInstance } from '$lib/db/schema';
  import { TYPE_DATA } from '$lib/types/picletTypes';
  
  interface Props {
    piclet: PicletInstance;
    size?: number;
    onClick?: () => void;
  }
  
  let { piclet, size = 100, onClick }: Props = $props();
  
  const typeColor = $derived(TYPE_DATA[piclet.primaryType]?.color || '#6c757d');
  const softTypeColor = $derived(`${typeColor}20`); // Add 20% opacity for soft background
</script>

<button 
  class="piclet-card" 
  style="width: {size}px; height: {size + 40}px; --type-color: {typeColor}; --soft-type-color: {softTypeColor};"
  onclick={onClick}
  type="button"
>
  <div class="image-container">
    <img 
      src={piclet.imageData || piclet.imageUrl} 
      alt={piclet.typeId || 'Piclet'}
      class="piclet-image"
      style="width: {size * 0.8}px; height: {size * 0.8}px;"
    />
    <div class="tier-badge tier-{piclet.tier}">
      {piclet.tier}
    </div>
  </div>
  
  <div class="details-section">
    <p class="nickname">{piclet.nickname || piclet.objectName}</p>
    <div class="types-section">
      <span class="type primary">{piclet.primaryType.toUpperCase()}</span>
    </div>
  </div>
</button>

<style>
  .piclet-card {
    display: flex;
    flex-direction: column;
    background: var(--type-color, #007bff);
    border-radius: 12px;
    border: 2px solid;
    border-color: var(--type-color, #007bff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s;
  }
  
  .piclet-card:active {
    transform: scale(0.95);
  }
  
  .image-container {
    width: 100%;
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
  }
  
  .piclet-image {
    object-fit: contain;
  }
  
  .tier-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .tier-low { background: #6c757d; color: white; }
  .tier-medium { background: #28a745; color: white; }
  .tier-high { background: #fd7e14; color: white; }
  .tier-legendary { background: #dc3545; color: white; }
  
  .details-section {
    height: 50px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0 0 10px 10px;
    width: 100%;
  }
  
  .nickname {
    margin: 0 0 4px 0;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
  }
  
  .types-section {
    display: flex;
    gap: 4px;
    justify-content: center;
  }
  
  .type {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
  }
  
  .type.primary {
    background: var(--type-color);
    color: white;
  }
  
  .type.secondary {
    background: rgba(0, 0, 0, 0.1);
    color: #666;
  }
</style>