frontend/src/components/Sidebar.tsx

import { FileTextIcon, HelpCircleIcon } from 'lucide-react';

interface SidebarProps {
  selectedTest: string;
  onTestChange: (test: string) => void;
}

export function Sidebar({ selectedTest, onTestChange }: SidebarProps) {
  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-4">
        {/* Gradient Header */}
        <h3 className="text-lg font-semibold text-white mb-3 px-3 py-2 rounded-md bg-gradient-to-r from-blue-800 to-teal-600 shadow-sm">
          New Test
        </h3>

        {/* Test Selection */}
        <div className="flex flex-col gap-2">
          {testTypes.map((test) => (
            <label
              key={test.value}
              className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer border transition-all duration-200 
                ${
                  selectedTest === test.value
                    ? 'border-blue-600 bg-blue-50 text-blue-900 font-medium shadow-sm'
                    : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50 text-gray-700'
                }`}
            >
              <input
                type="radio"
                name="testType"
                value={test.value}
                checked={selectedTest === test.value}
                onChange={() => onTestChange(test.value)}
                className="form-radio h-4 w-4 text-blue-600 focus:ring-blue-500"
              />
              <span>{test.label}</span>
            </label>
          ))}
        </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>
  );
}