import React from 'react';
import { ResearchPaper, CurrentView } from '../types';
import { ViewMode } from './FilterSortBar';

interface ResearchCardProps {
  paper: ResearchPaper;
  setCurrentView: (view: CurrentView) => void;
  setSelectedItemId: (id: string | null) => void;
  viewMode?: ViewMode;
}

const ResearchCard: React.FC<ResearchCardProps> = ({ paper, setCurrentView, setSelectedItemId, viewMode = 'grid' }) => {
  
  const handleCardClick = () => {
    setCurrentView('researchPaperDetail');
    setSelectedItemId(paper.id);
  };

  if (viewMode === 'list') {
    return (
       <div 
        onClick={handleCardClick}
        className="group block p-4 rounded-lg bg-white transition-all duration-300 ease-in-out hover:bg-slate-50 cursor-pointer w-full"
        role="article"
        aria-labelledby={`research-title-${paper.id}`}
      >
        <div className="flex items-start space-x-4">
          <div className="flex-shrink-0 w-24 h-24 md:w-28 md:h-28 rounded-md overflow-hidden bg-slate-200">
            <img 
              src={paper.imageUrl} 
              alt={`Визуализация для исследования: ${paper.title}`} 
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 ease-in-out" 
              loading="lazy" 
            />
          </div>
          <div className="flex-1">
             <h3 id={`research-title-${paper.id}`} className="text-base md:text-lg font-quicksand font-semibold text-slate-800 group-hover:text-black mb-1 transition-colors duration-200 leading-tight">
              {paper.title}
            </h3>
            <p className="text-xs text-slate-500 mb-2">
              <span className="font-semibold text-slate-600">{paper.category}</span>
              <span className="mx-1.5 text-slate-400">•</span>
              <span>{paper.date}</span>
            </p>
            {paper.authors && (
              <p className="text-xs text-slate-600 mt-2 font-inter line-clamp-1">
                Авторы: {paper.authors.join(', ')}
              </p>
            )}
            {paper.abstract && !paper.authors && (
              <p className="text-sm text-slate-600 line-clamp-2 font-inter">{paper.abstract}</p>
            )}
          </div>
        </div>
      </div>
    );
  }

  // Grid view
  return (
    <div 
      onClick={handleCardClick}
      className="group block rounded-xl overflow-hidden transition-all duration-300 ease-in-out bg-white transform hover:-translate-y-1 cursor-pointer shadow-sm hover:shadow-md"
      role="article"
      aria-labelledby={`research-title-${paper.id}`}
    >
      <div className="relative w-full overflow-hidden aspect-[4/3]">
        <img 
          src={paper.imageUrl} 
          alt={`Визуализация для исследования: ${paper.title}`} 
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 ease-in-out" 
          loading="lazy" 
        />
      </div>
      <div className="p-4 md:p-5">
        <h3 id={`research-title-${paper.id}`} className="font-quicksand font-semibold text-lg md:text-xl text-slate-800 group-hover:text-black mb-2 transition-colors duration-200 leading-tight">
          {paper.title}
        </h3>
        <p className="text-xs text-slate-500">
          <span className="font-semibold text-slate-600">{paper.category}</span>
          <span className="mx-1.5 text-slate-400">•</span>
          <span>{paper.date}</span>
        </p>
        {paper.authors && (
          <p className="text-xs text-slate-600 mt-2 font-inter line-clamp-1">
            Авторы: {paper.authors.join(', ')}
          </p>
        )}
         {paper.abstract && !paper.authors && (
          <p className="text-sm text-slate-600 mt-2 font-inter line-clamp-2">{paper.abstract}</p>
        )}
      </div>
    </div>
  );
};

export default ResearchCard;