import { Check, ExternalLink, Hash, Quote } from 'lucide-react';

export default function ThreadList({ threads, selectedIds, onSelect }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {threads.map((thread) => {
        const isSelected = selectedIds.includes(thread.id);
        
        return (
          <div 
            key={thread.id}
            onClick={() => onSelect(thread.id)}
            className={`
              relative p-5 rounded-xl border transition-all duration-200 cursor-pointer group
              ${isSelected 
                ? 'bg-blue-900/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.15)]' 
                : 'bg-slate-800 border-slate-700 hover:border-slate-500 hover:bg-slate-750'}
            `}
          >
            {/* Selection Indicator */}
            <div className={`
              absolute top-4 right-4 w-6 h-6 rounded-full border flex items-center justify-center transition-colors
              ${isSelected ? 'bg-blue-500 border-blue-500' : 'bg-slate-900 border-slate-600 group-hover:border-slate-400'}
            `}>
              {isSelected && <Check size={14} className="text-white" />}
            </div>

            <div className="mb-3">
              <h3 className="text-lg font-semibold text-white mb-1 line-clamp-2">{thread.title}</h3>
              <div className="flex items-center gap-2 text-xs text-slate-400 mb-2">
                <span className="bg-slate-900 px-2 py-0.5 rounded">{thread.date}</span>
              </div>
            </div>

            <div className="bg-slate-900/50 p-3 rounded-lg mb-4 border border-slate-800">
              <div className="flex items-start gap-2">
                <Quote size={16} className="text-slate-500 mt-0.5 shrink-0" />
                <p className="text-sm text-slate-300 italic line-clamp-2">"{thread.query}"</p>
              </div>
            </div>

            <div className="flex items-center justify-between text-xs text-slate-500">
              <div className="flex items-center gap-1">
                <Hash size={14} />
                <span>{thread.citations} Citations</span>
              </div>
              <span className="text-green-500 flex items-center gap-1">
                <ExternalLink size={14} />
                View Thread
              </span>
            </div>
          </div>
        );
      })}
    </div>
  );
}