import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Character } from '@/pages/frontend/ingame/types';

interface CharacterSelectProps {
    characters: Character[];
    value: string;
    onValueChange: (value: string) => void;
    label?: string;
    placeholder?: string;
    minLevel?: number;
}

export const CharacterSelect: React.FC<CharacterSelectProps> = ({
    characters,
    value,
    onValueChange,
    label = 'Select Character',
    placeholder = 'Choose a character...',
    minLevel,
}) => {
    return (
        <div className="space-y-2">
            <Label>{label}</Label>
            <Select value={value} onValueChange={onValueChange}>
                <SelectTrigger>
                    <SelectValue placeholder={placeholder} />
                </SelectTrigger>
                <SelectContent>
                    {characters.map((char) => {
                        const isBelowMinLevel = minLevel ? char.level < minLevel : false;
                        const isDisabled = char.is_online || isBelowMinLevel;

                        return (
                            <SelectItem
                                key={char.id}
                                value={char.id.toString()}
                                disabled={isDisabled}
                            >
                                <span className="flex items-center gap-2">
                                    {char.name} (Lv. {char.level})
                                    {char.is_online && (
                                        <span className="text-xs text-green-500 font-medium">
                                            Online
                                        </span>
                                    )}
                                    {!char.is_online && isBelowMinLevel && (
                                        <span className="text-xs text-orange-500 font-medium">
                                            Low Level
                                        </span>
                                    )}
                                </span>
                            </SelectItem>
                        );
                    })}
                </SelectContent>
            </Select>
        </div>
    );
};