const ContactPrefIcons = ({ methods, variant = 'card' }) => {
    const prefs = Array.isArray(methods) ? methods : [];
    const isOn = (key) => prefs.includes(key);

    const containerClass =
        variant === 'center'
            ? 'flex flex-col items-center gap-2'
            : 'flex flex-col items-start gap-1.5 w-24';

    const Item = ({ enabled, label, svg }) => (
        <div
            className={variant === 'center'
                ? 'flex items-center justify-center gap-2'
                : 'grid grid-cols-[10px_16px_1fr] items-center gap-x-2 w-full'}
            title={label}
        >
            <span className={`w-2 h-2 rounded-full ${enabled ? 'bg-primary' : 'bg-gray-300'}`} />
            <svg className={`w-4 h-4 ${enabled ? 'text-gray-800' : 'text-gray-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {svg}
            </svg>
            <span className={`${variant === 'center' ? 'text-sm' : 'text-xs'} ${enabled ? 'text-gray-800' : 'text-gray-400'}`}>{label}</span>
        </div>
    );

    return (
        <div className={containerClass}>
            <Item
                enabled={isOn('email')}
                label="Email"
                svg={<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 6h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2z" />}
            />
            <Item
                enabled={isOn('call')}
                label="Cell"
                svg={<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2 5.5A2.5 2.5 0 014.5 3h2.2a2 2 0 011.8 1.1l1.1 2.2a2 2 0 01-.5 2.3l-1 1c1.2 2.4 3.2 4.4 5.6 5.6l1-1a2 2 0 012.3-.5l2.2 1.1A2 2 0 0121 18.4v2.1A2.5 2.5 0 0118.5 23C9.4 23 2 15.6 2 6.5V5.5z" />}
            />
            <Item
                enabled={isOn('text')}
                label="Text"
                svg={<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h8m-8 4h6m-6 6l-4-4H4a2 2 0 01-2-2V6a2 2 0 012-2h16a2 2 0 012 2v8a2 2 0 01-2 2h-6l-4 4z" />}
            />
        </div>
    );
};

if (typeof window !== 'undefined') window.ContactPrefIcons = ContactPrefIcons;