frontend/src/components/Sidebar.tsx

import React, { useState } from 'react';
import { ChevronDownIcon, FileTextIcon, HelpCircleIcon } from 'lucide-react';
interface SidebarProps {
  selectedTest: string;
  onTestChange: (test: string) => void;
}
export function Sidebar({
  selectedTest,
  onTestChange
}: SidebarProps) {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const testTypes = [{
    value: 'cytology',
    label: 'Cytology Analysis'
  }, {
    value: 'colposcopy',
    label: 'Colposcopy Analysis'
  }, {
    value: 'histopathology',
    label: 'Histopathology Analysis'
  }];
  return <aside className="w-64 bg-white border-r border-gray-200 p-4">
      <div className="space-y-2">
        {/* New Test Dropdown */}
        <div className="relative">
          <button onClick={() => setIsDropdownOpen(!isDropdownOpen)} className="w-full bg-blue-600 text-white rounded-lg px-4 py-3 flex items-center justify-between hover:bg-blue-700 transition-colors">
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 bg-white rounded-full" />
              <span className="font-medium">New Test</span>
            </div>
            <ChevronDownIcon className={`w-5 h-5 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
          </button>
          {isDropdownOpen && <div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
              {testTypes.map(test => <button key={test.value} onClick={() => {
            onTestChange(test.value);
            setIsDropdownOpen(false);
          }} className={`w-full text-left px-4 py-3 hover:bg-gray-50 transition-colors ${selectedTest === test.value ? 'bg-blue-50 text-blue-600' : 'text-gray-700'}`}>
                  {test.label}
                </button>)}
            </div>}
        </div>
        {/* History */}
        <button className="w-full flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
          <FileTextIcon className="w-5 h-5" />
          <span>History</span>
        </button>
        {/* Help */}
        <button className="w-full flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
          <HelpCircleIcon className="w-5 h-5" />
          <span>Help</span>
        </button>
      </div>
    </aside>;
}