import React, { useState } from 'react';
import { Search, Plus, FileText, CheckCircle, XCircle, Download, Upload, Eye, Edit, Trash2, Save, X } from 'lucide-react';


const OveralSidebar = ({
    documentCount,
    filteredDocuments,
    projectData,
}) => {
  return (


<div className="w-80 bg-white border-r border-gray-200 p-6">
          <div className="space-y-6">

            {/* Stats */}
            <div className="bg-gray-50 rounded-lg p-4">
              <h3 className="font-medium text-gray-900 mb-3">Project Statistics</h3>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span>Total Items:</span>
                  <span className="font-medium">{documentCount}</span>
                </div>
                <div className="flex justify-between">
                  <span>Pending with Tech:</span>
                  <span className="font-medium">{filteredDocuments.length}</span>
                </div>
                <div className="flex justify-between">
                  <span>Pending with Business:</span>
                  <span className="font-medium">
                    {Object.values(projectData.MORB).filter(x => x === 'X').length}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>Completed</span>
                  <span className="font-medium">
                    {Object.values(projectData["Internal Policies"]).filter(x => x === 'X').length}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>Submitted</span>
                  <span className="font-medium">
                    {Object.values(projectData["Internal Policies"]).filter(x => x === 'X').length}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>In Review</span>
                  <span className="font-medium">
                    {Object.values(projectData["Internal Policies"]).filter(x => x === 'X').length}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>For Updating</span>
                  <span className="font-medium">
                    {Object.values(projectData["Internal Policies"]).filter(x => x === 'X').length}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>In Review</span>
                  <span className="font-medium">
                    {Object.values(projectData["Internal Policies"]).filter(x => x === 'X').length}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
    );
};

export default OveralSidebar;