import React from 'react';
import { Settings } from 'lucide-react';

interface DatosComunesToggleProps {
    isDatosComunes: boolean;
    onToggle: () => void;
}

export const DatosComunesToggle: React.FC<DatosComunesToggleProps> = ({
    isDatosComunes,
    onToggle
}) => {
    return (
        <button
            type="button"
            className={`btn btn-sm${isDatosComunes ? ' active' : ''}`}
            style={{
                minWidth: 180,
                fontWeight: 500,
                boxShadow: isDatosComunes ? 'inset 2px 2px 8px #ffd699' : undefined,
                background: isDatosComunes ? 'orange' : '#fff7e6',
                border: '2px solid orange',
                color: isDatosComunes ? '#fff' : 'orange',
                transition: 'all 0.2s'
            }}
            onClick={onToggle}
        >
            <Settings size={14} className="me-1" />
            {isDatosComunes ? 'Los Datos son Comunes' : 'Los Datos no son comunes'}
        </button>
    );
};