import React from 'react';

interface MainMenuProps {
    onSectionSelect: (section: string) => void;
    employee: any;
}

const MainMenu: React.FC<MainMenuProps> = ({ onSectionSelect, employee }) => {
    console.log('🔵 MainMenu компонент рендерится!');
    
    const menuItems = [
        { id: 'employee-info', emoji: '📋' }
    ];

    const menuItems_2 = [
        { id: 'finance', title: 'Финансы', emoji: '💰' },
        { id: 'medicine', title: 'Медицина', emoji: '🏥' },
        { id: 'trade-union', title: 'Профсоюз', emoji: '🤝' },
        { id: 'labor-safety', title: 'Охрана труда', emoji: '⛑️' },
        { id: 'contacts', title: 'Контакты', emoji: '📞' },
        { id: 'news', title: 'Новости', emoji: '📰' },
        { id: 'profile', title: 'Обо мне', emoji: '👤' },
    ];

    return (
        <div style={{
            minHeight: '100vh',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            padding: '10px',
            marginTop: '-5vh',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        }}>
            {employee && (
                <div style={{
                    color: '#fff',
                    fontSize: '1.5rem',
                    marginBottom: '10px',
                }}>
                    Приветствуем Вас, {employee.ima} {employee.famaly}
                </div>
            )}
            <h1 style={{
                color: '#fff',
                fontSize: '2.5rem',
                marginBottom: '40px',
                fontWeight: 300,
            }}>
                Выберите раздел
            </h1>

            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 870px))',
                gap: '25px',
                maxWidth: '900px',
                width: '100%',
                //height: '100%',
                justifyContent: 'center',
            }}>

                {menuItems.map((item) => (
                    <button
                        key={item.id}
                        onClick={() => onSectionSelect(item.id)}
                        style={{
                            background: 'linear-gradient(135deg, #1b718b 0%, #7ec87b 100%)',
                            borderRadius: '16px',
                            padding: '25px 30px',
                            marginBottom: '25px',
                            cursor: 'pointer',
                            transition: 'all 0.3s ease',
                            boxShadow: '0 4px 20px rgba(198, 231, 212, 0.25)',
                            display: 'inline-flex',
                            justifyContent: 'flex-start',
                            alignItems: 'center',
                            minHeight: '80px',
                            fontSize: '6.0rem',
                        }}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.transform = 'scale(1.05)';
                            e.currentTarget.style.boxShadow = '0 12px 40px rgba(0,0,0,0.2)';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.transform = 'scale(1)';
                            e.currentTarget.style.boxShadow = '0 8px 30px rgba(0,0,0,0.12)';
                        }}
                    >
                        <div>{item.emoji}</div>
                        <span style={{
                            fontSize: '1rem',
                            fontWeight: 500,
                            color: '#2d3436',
                            textAlign: 'center',
                        }}>
                        <div>
                            <h3 style={{
                                color: 'white',
                                fontSize: '25px',
                                fontWeight: 600,
                            }}>
                                Расчетный лист
                            </h3>
                        </div>
                        </span>
                    </button>
                ))}
            </div>

            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 200px))',
                gap: '15px',
                maxWidth: '900px',
                width: '100%',
                //height: '100%',
                justifyContent: 'center',
                marginTop: '15px'
            }}>
                
                {menuItems_2.map((item) => (
                    <button
                        key={item.id}
                        onClick={() => onSectionSelect(item.id)}
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                            gap: '12px',
                            padding: '5px 5px',
                            background: 'rgba(255,255,255,0.95)',
                            border: 'none',
                            borderRadius: '16px',
                            cursor: 'pointer',
                            boxShadow: '0 8px 30px rgba(0,0,0,0.12)',
                            minHeight: '140px',
                            fontSize: '3.5rem',
                            transition: 'all 0.3s ease',
                        }}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.transform = 'scale(1.05)';
                            e.currentTarget.style.boxShadow = '0 12px 40px rgba(0,0,0,0.2)';
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.transform = 'scale(1)';
                            e.currentTarget.style.boxShadow = '0 8px 30px rgba(0,0,0,0.12)';
                        }}
                    >
                        <div>{item.emoji}</div>
                        <span style={{
                            fontSize: '1rem',
                            fontWeight: 500,
                            color: '#2d3436',
                            textAlign: 'center',
                        }}>
                            {item.title}
                        </span>
                    </button>
                ))}
            </div>
        </div>
    );
};

console.log('🟢 MainMenu.tsx экспорт готов');

export default MainMenu;