import React, { useState } from 'react';
import { Innovation, Classification } from '../types';
import { ChevronDown, ChevronUp, Trash2, Check, Zap, FileText } from 'lucide-react';
import { COLOR_MAP } from '../constants';

interface InnovationCardProps {
  innovation: Innovation;
  onClassify: (id: string, classification: Classification) => void;
}

const InnovationCard: React.FC<InnovationCardProps> = ({ innovation, onClassify }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div
      className={`bg-white rounded-lg shadow-sm border border-slate-200 mb-4 overflow-hidden transition-all duration-200 ${innovation.classification === Classification.DELETE ? 'opacity-50' : ''}`}>
      <div className="p-4">
        <div className="flex justify-between items-start">
          <div className="flex-1 cursor-pointer" onClick={() => setIsExpanded(!isExpanded)}>
            <div className="px-4 pb-4 bg-slate-50 border-t border-slate-100 pt-3 text-sm">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <p className="font-semibold text-slate-700 mb-1">File name</p>
                  <p className="text-slate-600">{innovation.file_name}</p>
                </div>
                {/* <div>
                  <p className="font-semibold text-slate-700 mb-1">Innovation Potential</p>
                  <p className="text-slate-600">{ }</p>
                </div> */}
              </div>
            </div>
          </div>

          <div className="flex items-center ml-4">
            <button
              onClick={(e) => {
                e.stopPropagation();
                onClassify(innovation.id, Classification.DELETE);
              }}
              className="text-red-400 hover:text-red-600 p-1 mr-2 text-xs font-medium border border-red-200 rounded px-2"
            >
              Delete
            </button>
            <button
              onClick={() => setIsExpanded(!isExpanded)}
              className="text-slate-400 hover:text-slate-600 p-1"
            >
              {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
            </button>
          </div>
        </div>
      </div>

      {isExpanded && (
        <div
          className="flex flex-col gap-2 m-2"
          dangerouslySetInnerHTML={{ __html: innovation.answer }}
        />
      )}
    </div>
  );
};

export default InnovationCard;