import React from 'react';
import { Scenario } from '../types';
import { Mic, MessageSquare } from 'lucide-react';

interface ScenarioCardProps {
  scenario: Scenario;
  onSelect: (scenario: Scenario, mode: 'text' | 'voice') => void;
}

const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect }) => {
  const getDifficultyColor = (diff: string) => {
    switch (diff) {
      case 'Beginner': return 'bg-teal-50 text-teal-800 border-teal-100';
      case 'Intermediate': return 'bg-amber-50 text-amber-800 border-amber-100';
      case 'Advanced': return 'bg-rose-50 text-rose-800 border-rose-100';
      default: return 'bg-slate-50 text-slate-800 border-slate-100';
    }
  };

  return (
    <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-200 hover:border-teal-200 hover:shadow-md transition-all flex flex-col h-full group">
      <div className="flex justify-between items-start mb-4">
        <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ${getDifficultyColor(scenario.difficulty)}`}>
          {scenario.difficulty}
        </span>
        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
          {scenario.category}
        </span>
      </div>
      
      <h3 className="text-lg font-bold text-slate-800 mb-2 group-hover:text-teal-700 transition-colors">{scenario.title}</h3>
      <p className="text-slate-600 text-sm mb-5 flex-grow leading-relaxed font-light">{scenario.description}</p>
      
      <div className="mb-6">
        <div className="flex flex-wrap gap-1.5">
          {scenario.cbtFocus.map(focus => (
            <span key={focus} className="text-[10px] font-medium bg-slate-50 text-slate-500 px-2 py-0.5 rounded border border-slate-100">
              {focus}
            </span>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3 mt-auto">
        <button 
          onClick={() => onSelect(scenario, 'text')}
          className="flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-slate-50 text-slate-600 hover:bg-slate-100 transition-all font-semibold text-xs border border-slate-200"
        >
          <MessageSquare size={14} />
          Chat
        </button>
        <button 
          onClick={() => onSelect(scenario, 'voice')}
          className="flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition-all font-semibold text-xs shadow-sm shadow-teal-100"
        >
          <Mic size={14} />
          Voice
        </button>
      </div>
    </div>
  );
};

export default ScenarioCard;