import React from 'react';
import { ProviderIcon } from "@/components/common/ProviderIcon";
import { cn } from "@/utils";

// 简单的辅助函数：首字母大写
const capitalize = (s: string) => s ? s.charAt(0).toUpperCase() + s.slice(1) : '';

interface ModelProviderIconProps {
    provider: string;
    className?: string;
}

export const ModelProviderIcon: React.FC<ModelProviderIconProps> = ({ provider, className }) => {
    return (
        <div className={cn("w-4 h-4 shrink-0 rounded-full overflow-hidden bg-muted/20 p-0.5", className)}>
             <ProviderIcon provider={provider} />
        </div>
    );
};

interface ModelOptionLabelProps {
    provider: string;
    name: string;
    className?: string;
}

export const ModelOptionLabel: React.FC<ModelOptionLabelProps> = ({ provider, name, className }) => {
    const providerName = capitalize(provider);
    return (
        <div className={cn("flex items-center gap-2", className)}>
            <ModelProviderIcon provider={provider} />
            <div className="flex flex-col items-start leading-none gap-0.5">
                <span>{name}</span>
                <span className="text-[10px] text-muted-foreground font-normal">{providerName}</span>
            </div>
        </div>
    );
};
