'use client';

import React from 'react';

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

const CFASymbol: React.FC<CFASymbolProps> = ({ 
    size = 'medium', 
    className = '', 
    style = {} 
}) => {
    const sizeMap = {
        small: '16px',
        medium: '20px',
        large: '24px'
    };

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

    return (
        <img 
            src="/layout/images/logo/logo-cfa.png" 
            alt="CFA" 
            className={`cfa-symbol ${className}`}
            style={symbolStyle}
            title="Franc CFA"
        />
    );
};

export default CFASymbol;
