import React from 'react';
import { useCalculatorStore } from '../../store/calculatorStore';

export const SheetNavigation: React.FC = () => {
    const { activeSheet, setActiveSheet } = useCalculatorStore();
    const sheets = ['Code', 'Wind', 'MWFRS all h', "MWFRS h ≤ 60'", "C&C h ≤ 60'", 'Open Buildings', 'Roof Loads', 'Floor Loads', 'Roof W', 'Other W', 'Rain', 'Snow-1', 'Snow-2', 'Seismic', 'Tornado', 'Tornado MWFRS'];

    return (
        <div className="sheet-nav">
            <div className="sheet-nav-header">Sheets</div>
            {sheets.map(sheet => (
                <button
                    key={sheet}
                    className={`sheet-nav-item ${activeSheet === sheet ? 'active' : ''}`}
                    onClick={() => setActiveSheet(sheet)}
                >
                    {sheet}
                </button>
            ))}
        </div>
    );
};