kaboot/components/QuestionCard.tsx

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { GripVertical, ChevronDown, ChevronUp, Pencil, Trash2, Check, X, Triangle, Diamond, Circle, Square } from 'lucide-react';
import { Question } from '../types';

interface QuestionCardProps {
  question: Question;
  index: number;
  onEdit: () => void;
  onDelete: () => void;
  isExpanded: boolean;
  onToggleExpand: () => void;
  isDragging?: boolean;
  dragListeners?: any;
}

const ShapeIcon: React.FC<{ shape: string; className?: string }> = ({ shape, className }) => {
  const props = { size: 16, className };
  switch (shape) {
    case 'triangle': return <Triangle {...props} />;
    case 'diamond': return <Diamond {...props} />;
    case 'circle': return <Circle {...props} />;
    case 'square': return <Square {...props} />;
    default: return <Circle {...props} />;
  }
};

const colorMap: Record<string, string> = {
  red: 'bg-red-500',
  blue: 'bg-blue-500',
  yellow: 'bg-yellow-500',
  green: 'bg-green-500'
};

export const QuestionCard: React.FC<QuestionCardProps> = ({
  question,
  index,
  onEdit,
  onDelete,
  isExpanded,
  onToggleExpand,
  isDragging,
  dragListeners
}) => {
  const correctOption = question.options.find(o => o.isCorrect);
  const truncatedText = question.text.length > 60 
    ? question.text.slice(0, 60) + '...' 
    : question.text;

  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      className={`bg-white rounded-2xl shadow-md border-2 transition-all ${
        isDragging ? 'border-theme-primary shadow-lg scale-[1.02]' : 'border-gray-100'
      }`}
    >
      <div 
        className="flex items-center gap-3 p-4 cursor-pointer"
        onClick={onToggleExpand}
      >
        <div 
          className="text-gray-300 hover:text-gray-400 cursor-grab active:cursor-grabbing touch-none"
          {...dragListeners}
        >
          <GripVertical size={20} />
        </div>
        
        <div className="flex-shrink-0 w-8 h-8 bg-theme-primary text-white rounded-lg flex items-center justify-center font-black text-sm">
          {index + 1}
        </div>
        
        <div className="flex-1 min-w-0">
          <p className="font-bold text-gray-800 truncate">{truncatedText}</p>
        </div>
        
        {correctOption && (
          <div className={`flex-shrink-0 px-3 py-1 rounded-full text-white text-xs font-bold flex items-center gap-1.5 ${colorMap[correctOption.color]}`}>
            <ShapeIcon shape={correctOption.shape} className="fill-current" />
            <span className="hidden sm:inline max-w-[100px] truncate">{correctOption.text}</span>
          </div>
        )}
        
        <div className="flex items-center gap-1 flex-shrink-0">
          <button
            onClick={(e) => { e.stopPropagation(); onEdit(); }}
            className="p-2 text-gray-400 hover:text-theme-primary hover:bg-theme-primary/10 rounded-lg transition-colors"
          >
            <Pencil size={18} />
          </button>
          <button
            onClick={(e) => { e.stopPropagation(); onDelete(); }}
            className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
          >
            <Trash2 size={18} />
          </button>
          <div className="p-2 text-gray-400">
            {isExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
          </div>
        </div>
      </div>
      
      <AnimatePresence>
        {isExpanded && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="overflow-hidden"
          >
            <div className="px-4 pb-4 pt-0 border-t-2 border-gray-50">
              <p className="text-gray-700 font-medium py-3">{question.text}</p>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                {question.options.map((option, idx) => (
                  <div
                    key={idx}
                    className={`p-3 rounded-xl border-2 ${
                      option.isCorrect 
                        ? 'border-green-500 bg-green-50' 
                        : 'border-gray-200 bg-gray-50'
                    }`}
                  >
                    <div className="flex items-center gap-2">
                      <div className={`w-6 h-6 rounded flex items-center justify-center ${colorMap[option.color]}`}>
                        <ShapeIcon shape={option.shape} className="text-white fill-white" />
                      </div>
                      <span className={`font-bold flex-1 ${option.isCorrect ? 'text-green-700' : 'text-gray-700'}`}>
                        {option.text}
                      </span>
                      {option.isCorrect ? (
                        <Check size={18} className="text-green-500" />
                      ) : (
                        <X size={18} className="text-gray-300" />
                      )}
                    </div>
                    {option.reason && (
                      <p className="text-xs text-gray-500 mt-2 pl-8">{option.reason}</p>
                    )}
                  </div>
                ))}
              </div>
              
              <div className="mt-3 flex items-center gap-4 text-sm text-gray-500">
                <span>Time limit: <strong>{question.timeLimit}s</strong></span>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
};