import { cn } from '@/lib/utils';

export interface ClassInfo {
    id: number;
    name: string;
    icon: string;
}

export const classes: Record<number, ClassInfo> = {
    0: { id: 0, name: 'Blademaster', icon: '/img/iconclass/blademaster.webp' },
    1: { id: 1, name: 'Mage', icon: '/img/iconclass/mage.webp' },
    2: { id: 2, name: 'Psychic', icon: '/img/iconclass/psychic.webp' },
    3: { id: 3, name: 'Venomancer', icon: '/img/iconclass/venomancer.webp' },
    4: { id: 4, name: 'Barbarian', icon: '/img/iconclass/barbarian.webp' },
    5: { id: 5, name: 'Assassin', icon: '/img/iconclass/assassin.webp' },
    6: { id: 6, name: 'Archer', icon: '/img/iconclass/archer.webp' },
    7: { id: 7, name: 'Cleric', icon: '/img/iconclass/cleric.webp' },
    8: { id: 8, name: 'Seeker', icon: '/img/iconclass/seeker.webp' },
    9: { id: 9, name: 'Mystic', icon: '/img/iconclass/mystic.webp' },
    10: { id: 10, name: 'Duskblade', icon: '/img/iconclass/duskblade.webp' },
    11: { id: 11, name: 'Stormbringer', icon: '/img/iconclass/stormbringer.webp' },
    12: { id: 12, name: 'Technician', icon: '/img/iconclass/technician.webp' },
    13: { id: 13, name: 'Edgerunner', icon: '/img/iconclass/edgerunner.webp' },
    14: { id: 14, name: 'Wildwalker', icon: '/img/iconclass/wildwalker.webp' },
};

export function getClassInfo(classId: number): ClassInfo {
    return classes[classId] ?? { id: classId, name: 'Unknown', icon: '/img/iconclass/blademaster.webp' };
}

export function getClassName(classId: number): string {
    return getClassInfo(classId).name;
}

export function getClassIcon(classId: number): string {
    return getClassInfo(classId).icon;
}

interface ClassIconProps {
    classId: number;
    showName?: boolean;
    size?: 'sm' | 'md' | 'lg';
    className?: string;
}

const sizeClasses = {
    sm: 'h-4 w-4',
    md: 'h-6 w-6',
    lg: 'h-8 w-8',
};

export function ClassIcon({ classId, showName = false, size = 'md', className }: ClassIconProps) {
    const classInfo = getClassInfo(classId);

    return (
        <div className={cn('flex items-center gap-2', className)}>
            <img 
                src={classInfo.icon} 
                alt={classInfo.name} 
                className={cn(sizeClasses[size], 'object-contain')}
            />
            {showName && <span>{classInfo.name}</span>}
        </div>
    );
}

export default ClassIcon;