frontend-react/src/components/project/SectionList.tsx

import React from 'react';
import { CheckCircle, Clock } from 'lucide-react';

export interface SectionDef {
    id?: string;
    section_type: string;
    title: string;
}

interface SectionListProps {
    sections: SectionDef[];
    activeSection: string;
    setActiveSection: (id: string) => void;
    completedSections?: string[];
}

const SectionList: React.FC<SectionListProps> = ({ sections, activeSection, setActiveSection, completedSections = [] }) => {
    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
            <h3 style={{ fontSize: '1rem', color: 'var(--text-primary)', marginBottom: '1rem', paddingLeft: '0.5rem' }}>Struktura Wniosku</h3>
            {sections.map((section) => {
                const isActive = activeSection === section.section_type;
                const isCompleted = completedSections.includes(section.section_type);
                
                return (
                    <div
                        key={section.section_type}
                        onClick={() => setActiveSection(section.section_type)}
                        style={{
                            padding: '0.8rem 1rem',
                            borderRadius: '8px',
                            cursor: 'pointer',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                            background: isActive ? 'rgba(59, 130, 246, 0.15)' : 'transparent',
                            border: isActive ? '1px solid rgba(59, 130, 246, 0.3)' : '1px solid transparent',
                            color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
                            fontWeight: isActive ? 600 : 400,
                            transition: 'all 0.2s'
                        }}
                        className={!isActive ? "hover-bg" : ""}
                    >
                        <span style={{ fontSize: '0.9rem', flex: 1 }}>{section.title}</span>
                        {isCompleted ? (
                            <CheckCircle size={16} color="var(--accent-green)" />
                        ) : (
                            <Clock size={16} color="rgba(255,255,255,0.2)" />
                        )}
                    </div>
                );
            })}
            
            <div style={{ height: '1px', background: 'rgba(255,255,255,0.1)', margin: '0.5rem 0' }} />
            
            <div
                onClick={() => setActiveSection('final_document')}
                style={{
                    padding: '0.8rem 1rem',
                    borderRadius: '8px',
                    cursor: 'pointer',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    background: activeSection === 'final_document' ? 'rgba(16, 185, 129, 0.15)' : 'transparent',
                    border: activeSection === 'final_document' ? '1px solid rgba(16, 185, 129, 0.3)' : '1px solid transparent',
                    color: activeSection === 'final_document' ? 'var(--accent-green)' : 'var(--text-secondary)',
                    fontWeight: activeSection === 'final_document' ? 600 : 400,
                    transition: 'all 0.2s'
                }}
                className={activeSection !== 'final_document' ? "hover-bg" : ""}
            >
                <span style={{ fontSize: '0.9rem', flex: 1 }}>Gotowy Wniosek</span>
                <CheckCircle size={16} color={activeSection === 'final_document' ? "var(--accent-green)" : "rgba(255,255,255,0.2)"} />
            </div>
        </div>
    );
};

export default SectionList;