import React from 'react';
import { CheckCircle2, History } from 'lucide-react';

export const FinanceReports: React.FC = () => {
    return (
        <div className="space-y-6 animate-fade-in">
            {/* Archives */}
            <div>
                <h3 className="font-bold text-slate-700 text-sm mb-3 flex items-center gap-2 px-1">
                    <History className="w-4 h-4 text-slate-400"/> Архив сформированных отчетов
                </h3>
                <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
                    <div className="p-3 border-b border-slate-100 flex items-center justify-between hover:bg-slate-50">
                        <div className="flex items-center gap-3">
                            <CheckCircle2 className="w-4 h-4 text-emerald-500"/>
                            <span className="text-xs font-medium text-slate-700">Отчет по ГИС ЖКХ за 1кв 2024</span>
                        </div>
                        <span className="text-[10px] font-bold text-slate-400">15.04.2024</span>
                    </div>
                    <div className="p-3 border-b border-slate-100 flex items-center justify-between hover:bg-slate-50">
                        <div className="flex items-center gap-3">
                            <CheckCircle2 className="w-4 h-4 text-emerald-500"/>
                            <span className="text-xs font-medium text-slate-700">Годовой финансовый отчет (2023)</span>
                        </div>
                        <span className="text-[10px] font-bold text-slate-400">20.01.2024</span>
                    </div>
                </div>
            </div>
        </div>
    );
};