clarity-helper/components/ScenarioCard.tsx

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

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

const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect, onDelete }) => {
  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';
    }
  };

  const difficultyExplanations: Record<string, string> = {
    'Beginner': 'Low-stakes environment with highly structured feedback and clear cognitive distortions.',
    'Intermediate': 'Moderate social friction requiring nuanced responses and identifying subtle distortions.',
    'Advanced': 'High-trigger environment with resistant AI personas to test deep emotional regulation.'
  };

  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 relative">
      {onDelete && (
        <button 
          onClick={(e) => {
            e.stopPropagation();
            onDelete(scenario.id);
          }}
          className="absolute top-4 right-4 p-2 text-slate-300 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-all opacity-0 group-hover:opacity-100"
          title="Delete custom scenario"
        >
          <Trash2 size={16} />
        </button>
      )}

      <div className="flex justify-between items-start mb-4">
        <Tooltip content={difficultyExplanations[scenario.difficulty]}>
          <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border cursor-help ${getDifficultyColor(scenario.difficulty)}`}>
            {scenario.difficulty}
          </span>
        </Tooltip>
        {!onDelete && (
          <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 pr-6">{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 => (
            <Tooltip key={focus} content={`Specific CBT protocol targeting: ${focus}`}>
              <span className="text-[10px] font-medium bg-slate-50 text-slate-500 px-2 py-0.5 rounded border border-slate-100 cursor-help flex items-center gap-1">
                {focus}
              </span>
            </Tooltip>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3 mt-auto">
        <Tooltip content="Engage in a structured text-based roleplay with real-time feedback." position="bottom">
          <button 
            onClick={() => onSelect(scenario, 'text')}
            className="w-full 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>
        </Tooltip>
        <Tooltip content="Practice verbal emotional regulation and vocal expression in real-time." position="bottom">
          <button 
            onClick={() => onSelect(scenario, 'voice')}
            className="w-full 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>
        </Tooltip>
      </div>
    </div>
  );
};

export default React.memo(ScenarioCard);