import React, { useState } from 'react';

const MaintenancePlan = () => {
    const [activeTab, setActiveTab] = useState('View 1');

    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Maintenance Plan Visualization</h3>
                <div style={{ display: 'flex', gap: '0.5rem' }}>
                    {['View 1', 'View 2', 'View 3', 'View 4'].map(view => (
                        <button
                            key={view}
                            onClick={() => setActiveTab(view)}
                            style={{
                                padding: '0.5rem 1rem',
                                background: activeTab === view ? 'var(--accent-primary)' : 'var(--bg-tertiary)',
                                color: activeTab === view ? '#fff' : 'var(--text-secondary)',
                                borderRadius: '4px'
                            }}
                        >
                            {view}
                        </button>
                    ))}
                </div>
            </div>
            <div className="widget-content">
                <div style={{ padding: '2rem', textAlign: 'center', background: 'var(--bg-secondary)', borderRadius: '8px', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <div>
                        <h4>{activeTab} Content</h4>
                        <p style={{ color: 'var(--text-secondary)' }}>Visualization for maintenance planning (Dual Calendar / Gantt / List)</p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MaintenancePlan;
