'use client';

import { DebugName } from '@/components/game/debug/debug-context';
import { Scroll } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';

interface BlueprintsSectionProps {
  blueprints: string[];
}

export function BlueprintsSection({ blueprints }: BlueprintsSectionProps) {
  if (blueprints.length === 0) return null;
  
  return (
    <DebugName name="BlueprintsSection">
    <div>
      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
        <Scroll className="w-3 h-3" />
        Blueprints (permanent)
      </div>
      <div className="flex flex-wrap gap-1">
        {blueprints.map((id) => {
          const drop = LOOT_DROPS[id];
          if (!drop) return null;
          const rarityColor = RARITY_CSS_VAR[drop.rarity] || 'var(--rarity-common)';
          return (
            <Badge
              key={id}
              className="text-xs"
              style={{
                backgroundColor: `${RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)'}`,
                color: rarityColor,
                borderColor: rarityColor,
              }}
            >
              {drop.name}
            </Badge>
          );
        })}
      </div>
      <div className="text-xs text-[var(--text-muted)] mt-1 italic">
        Blueprints are permanent unlocks - use them to craft equipment
      </div>
    </div>
    </DebugName>
  );
}