'use client';

import React from 'react';

interface LionsDevLogoProps {
    size?: 'small' | 'medium' | 'large';
    className?: string;
    style?: React.CSSProperties;
    showText?: boolean;
}

const LionsDevLogo: React.FC<LionsDevLogoProps> = ({ 
    size = 'medium', 
    className = '', 
    style = {},
    showText = false
}) => {
    const sizeMap = {
        small: '20px',
        medium: '32px',
        large: '48px'
    };

    const logoStyle = {
        height: sizeMap[size],
        width: 'auto',
        display: 'inline-block',
        verticalAlign: 'middle',
        ...style
    };

    return (
        <div className={`lions-dev-logo flex align-items-center ${className}`}>
            <div
                style={{
                    height: sizeMap[size],
                    width: sizeMap[size],
                    backgroundColor: '#1a1a1a',
                    borderRadius: '4px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginRight: showText ? '8px' : '0',
                    border: '1px solid #fbbf24',
                    ...style
                }}
                title="Développé par Lions Dev"
            >
                <span style={{
                    color: '#fbbf24',
                    fontWeight: 'bold',
                    fontSize: size === 'small' ? '8px' : size === 'medium' ? '12px' : '16px'
                }}>
                    🦁
                </span>
            </div>
            {showText && (
                <span className="text-sm text-600">
                    Développé par Lions Dev
                </span>
            )}
        </div>
    );
};

export default LionsDevLogo;