AwsLinker/app/components/Logo.tsx

'use client';

import Image from 'next/image';

interface LogoProps {
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
    showText?: boolean;
    className?: string;
    variant?: 'light' | 'dark' | 'color';
}

export default function Logo({
    size = 'md',
    showText = true,
    className = '',
    variant = 'color',
}: LogoProps) {
    const sizeClasses = {
        xs: 'w-6 h-6',      // 24px - 超小尺寸
        sm: 'w-10 h-10',    // 40px - 小尺寸
        md: 'w-14 h-14',    // 56px - 中等尺寸  
        lg: 'w-20 h-20',    // 80px - 大尺寸
        xl: 'w-24 h-24',    // 96px - 特大尺寸
        '2xl': 'w-32 h-32', // 128px - 超大尺寸
    };

    const textSizeClasses = {
        xs: 'text-sm',
        sm: 'text-lg',
        md: 'text-xl',
        lg: 'text-2xl',
        xl: 'text-3xl',
        '2xl': 'text-4xl',
    };

    const colorClasses = {
        light: 'text-white',
        dark: 'text-gray-900',
        color: 'text-blue-700',
    };

    // 根据variant调整logo的滤镜效果
    const getImageFilter = () => {
        switch (variant) {
            case 'light':
                return 'brightness(0) invert(1)'; // 白色效果
            case 'dark':
                return 'brightness(0)'; // 黑色效果
            case 'color':
            default:
                return 'none'; // 保持原色
        }
    };

    const getImageOpacity = () => {
        switch (variant) {
            case 'light':
                return 'opacity-90';
            case 'dark':
                return 'opacity-80';
            case 'color':
            default:
                return 'opacity-100';
        }
    };

    return (
        <div className={`flex items-center ${className}`}>
            {/* Logo Image */}
            <div className={`${sizeClasses[size]} relative`}>
                <Image
                    src="/images/awslinker-logo.png"
                    alt="AWS Linker Logo"
                    fill
                    className={`object-contain drop-shadow-md ${getImageOpacity()}`}
                    style={{
                        filter: getImageFilter(),
                    }}
                    priority
                />
            </div>

            {showText && (
                <div className="ml-3">
                    <div className={`${textSizeClasses[size]} font-bold ${colorClasses[variant]}`}>
                        AWS Linker
                    </div>
                    {size !== 'sm' && (
                        <div
                            className={`text-xs ${variant === 'light' ? 'text-blue-100' : variant === 'dark' ? 'text-gray-600' : 'text-blue-500'} font-medium`}
                        >
                            DongYun Technology
                        </div>
                    )}
                </div>
            )}
        </div>
    );
}