import React from 'react';
import { FaFileAlt } from 'react-icons/fa';

const RightBar = ({ reports, onSelect }) => {
  return (
    <div className="hidden lg:block w-80 p-4 border-l border-gray-800 h-screen sticky top-0 overflow-y-auto">
      <div className="bg-gray-900 rounded-2xl p-4 mb-4">
        <h2 className="font-bold text-xl mb-4">Storage</h2>
        <div className="space-y-4">
          {reports.map((report) => (
            <div 
              key={report._id} 
              draggable 
              onDragEnd={() => onSelect(report)} // Simple Drag Logic: Drop anywhere to select
              onClick={() => onSelect(report)}
              className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded-xl cursor-grab active:cursor-grabbing transition"
            >
              <div className="bg-blue-500/20 text-blue-500 p-3 rounded-lg">
                <FaFileAlt />
              </div>
              <div className="overflow-hidden">
                <p className="font-bold truncate">Acct: {report.accountId}</p>
                <p className="text-sm text-gray-500">{new Date(report.uploadDate).toLocaleDateString()}</p>
              </div>
            </div>
          ))}
          {reports.length === 0 && <p className="text-gray-500">No reports found.</p>}
        </div>
      </div>
    </div>
  );
};

export default RightBar;