import React from 'react';
import { useRegion } from '../contexts/RegionContext';

export const RegionSwitcher: React.FC = () => {
    const { currentRegion, setRegion, availableRegions } = useRegion();

    // If only one region is available (e.g. Regional Admin or Normal User), show text only or hide logic
    // Actually, distinct visual indication is good.
    if (availableRegions.length <= 1) {
        return (
             <div style={{ padding: '0 1rem', display: 'flex', alignItems: 'center' }}>
                <span style={{ marginRight: '8px', fontSize: '0.8rem', opacity: 0.7 }}>Região:</span>
                <span style={{ 
                    fontSize: '0.9rem', 
                    fontWeight: 600, 
                    color: '#444' 
                }}>
                    {currentRegion === 'SP' ? 'São Paulo' : currentRegion === 'MG' ? 'Minas Gerais' : currentRegion}
                </span>
             </div>
        );
    }

    return (
        <div style={{ padding: '0 1rem', display: 'flex', alignItems: 'center' }}>
            <span style={{ marginRight: '8px', fontSize: '0.8rem', opacity: 0.7 }}>Região:</span>
            <select
                value={currentRegion}
                onChange={(e) => setRegion(e.target.value)}
                style={{
                    padding: '4px 8px',
                    borderRadius: '4px',
                    border: '1px solid #ccc',
                    backgroundColor: 'white',
                    color: '#333',
                    fontSize: '0.9rem',
                    cursor: 'pointer'
                }}
            >
                {availableRegions.map((region) => (
                    <option key={region} value={region}>
                        {region === 'SP' ? 'São Paulo' : 'Minas Gerais'}
                    </option>
                ))}
            </select>
        </div>
    );
};