import React from 'react'
import styles from './Navigation.module.css'
import NavigationItem from "../NavigationItem/NavigationItem.tsx";
import SaveButton from "../SaveButton/SaveButton.tsx";

interface NavigationProps {
    onNavigationClick: (title: string) => void;
    activePage: string
}

const Navigation: React.FC<NavigationProps> = ({onNavigationClick, activePage}) => {
    const items: string[] = ['Вопросы', 'Настройки', 'Результаты']

    return (
        <div>
            <nav className={styles.nav}>
                <ul className={styles.navList}>
                    {items.map(item => (
                        <NavigationItem
                            key={item}
                            title={item}
                            isActive={activePage === item}
                            onClick={() => onNavigationClick(item)}
                        />
                    ))}
                </ul>
            </nav>

            <SaveButton />
        </div>
    );
};

export default Navigation;