nuzlocke-tracker/frontend/src/components/ShinyBox.tsx

import { PokemonCard } from './PokemonCard'
import type { EncounterDetail } from '../types'

interface ShinyBoxProps {
  encounters: EncounterDetail[]
  onEncounterClick?: (encounter: EncounterDetail) => void
}

export function ShinyBox({ encounters, onEncounterClick }: ShinyBoxProps) {
  return (
    <div className="border-2 border-yellow-400 dark:border-yellow-600 rounded-lg p-4">
      <h3 className="text-sm font-semibold text-yellow-600 dark:text-yellow-400 mb-3 flex items-center gap-1.5">
        <span>&#10022;</span>
        Shiny Box
        <span className="text-xs font-normal text-gray-400 dark:text-gray-500 ml-1">
          {encounters.length} {encounters.length === 1 ? 'shiny' : 'shinies'}
        </span>
      </h3>
      {encounters.length > 0 ? (
        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
          {encounters.map((enc) => (
            <PokemonCard
              key={enc.id}
              encounter={enc}
              onClick={
                onEncounterClick ? () => onEncounterClick(enc) : undefined
              }
            />
          ))}
        </div>
      ) : (
        <p className="text-sm text-gray-400 dark:text-gray-500 text-center py-2">
          No shinies found yet
        </p>
      )}
    </div>
  )
}