import React from 'react';
import { StyleOption } from './types';
import { 
  Minus, BookOpen, Building2, Cpu, Palette, 
  Sparkles, Heart, GraduationCap, Factory, Globe, 
  Zap, Coffee, Leaf
} from 'lucide-react';

// Category icons mapping
export const CATEGORY_ICONS: Record<string, React.ComponentType<{ size?: number }>> = {
  'Minimalist': Minus,
  'Editorial': BookOpen,
  'Corporate': Building2,
  'Tech': Cpu,
  'Creative': Palette,
  'Vintage': Sparkles,
  'Academic': GraduationCap,
  'Lifestyle': Heart,
  'Industrial': Factory,
  'Nature': Leaf,
  'Core': Globe,
  'Other': Zap
};

// Category display names mapping (for icons)
export const getCategoryIcon = (category: string) => {
  // Try exact match first
  if (CATEGORY_ICONS[category]) {
    return CATEGORY_ICONS[category];
  }
  
  // Try common variations
  const normalized = category.toLowerCase();
  if (normalized.includes('minimal')) return Minus;
  if (normalized.includes('edit')) return BookOpen;
  if (normalized.includes('corp')) return Building2;
  if (normalized.includes('tech')) return Cpu;
  if (normalized.includes('creat')) return Palette;
  if (normalized.includes('vint')) return Sparkles;
  if (normalized.includes('acad')) return GraduationCap;
  if (normalized.includes('life')) return Heart;
  if (normalized.includes('indust')) return Factory;
  
  return Zap;
};

// Templates are now loaded dynamically from TypoGenie-Data/templates/
// See README-TEMPLATES.md for documentation on creating custom templates
