web/src/components/LearningModeSelector.tsx

import React from 'react';
import { Card } from './ui/card';
import { 
  Lightbulb, 
  MessageCircleQuestion, 
  GraduationCap, 
  FileEdit, 
  Zap,
  MessageSquare
} from 'lucide-react';
import type { LearningMode } from '../App';

interface ModeSelectorProps {
  selectedMode: LearningMode;
  onModeChange: (mode: LearningMode) => void;
}

const modes = [
  {
    id: 'general' as LearningMode,
    icon: MessageSquare,
    title: 'General',
    description: 'Answer various questions (context required)',
    color: 'from-purple-500 to-purple-600',
  },
  {
    id: 'concept' as LearningMode,
    icon: Lightbulb,
    title: 'Concept Explainer',
    description: 'Break down complex topics',
    color: 'from-blue-500 to-blue-600',
  },
  {
    id: 'socratic' as LearningMode,
    title: 'Socratic Tutor',
    description: 'Learn through questions',
    color: 'from-red-500 to-rose-600',
  },
  {
    id: 'exam' as LearningMode,
    icon: GraduationCap,
    title: 'Exam Prep/Quiz',
    description: 'Test your knowledge',
    color: 'from-green-500 to-green-600',
  },
  {
    id: 'assignment' as LearningMode,
    icon: FileEdit,
    title: 'Assignment Helper',
    description: 'Get homework guidance',
    color: 'from-orange-500 to-orange-600',
  },
  {
    id: 'summary' as LearningMode,
    icon: Zap,
    title: 'Quick Summary',
    description: 'Fast key points review',
    color: 'from-pink-500 to-pink-600',
  },
];

export function LearningModeSelector({ selectedMode, onModeChange }: ModeSelectorProps) {
  return (
    <div className="space-y-2">
      {modes.map((mode) => {
        const Icon = mode.icon;
        const isSelected = selectedMode === mode.id;
        
        return (
          <Card
            key={mode.id}
            className={`
              p-3 cursor-pointer transition-all duration-200
              ${isSelected 
                ? 'border-primary bg-accent shadow-sm' 
                : 'hover:border-primary/50 hover:shadow-sm'
              }
            `}
            onClick={() => onModeChange(mode.id)}
          >
            <div className="flex items-start gap-3">
              <div className={`
                w-10 h-10 rounded-lg bg-gradient-to-br ${mode.color}
                flex items-center justify-center flex-shrink-0
              `}>
                <Icon className="h-5 w-5 text-white" />
              </div>
              <div className="flex-1 min-w-0">
                <h4 className="text-sm mb-1">{mode.title}</h4>
                <p className="text-xs text-muted-foreground">{mode.description}</p>
              </div>
              {isSelected && (
                <div className="w-2 h-2 rounded-full bg-primary flex-shrink-0 mt-2" />
              )}
            </div>
          </Card>
        );
      })}
    </div>
  );
}