import { Clock, ThumbsUp, MapPin } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Article, CategoryTitles, CityTitles } from '../types';
import MinutesWord from './MinutesWord';

interface ArticleCardProps {
  article: Article;
  featured?: boolean;
}

export function ArticleCard({ article, featured = false }: ArticleCardProps) {
  const categoryName = CategoryTitles[article.categoryId];

  return (
    <article className={`overflow-hidden rounded-lg shadow-lg transition-transform hover:scale-[1.02] ${
      featured ? 'col-span-2 row-span-2' : ''
    }`}>
      <div className="relative">
        <img
          src={article.coverImage}
          alt={article.title}
          className={`w-full object-cover ${featured ? 'h-96' : 'h-64'}`}
        />
        <div className="absolute top-4 left-4 flex gap-2">
          <span className="bg-white/90 px-3 py-1 rounded-full text-sm font-medium">
            {categoryName}
          </span>
          <span className="bg-white/90 px-3 py-1 rounded-full text-sm font-medium flex items-center">
            <MapPin size={14} className="mr-1" />
            {CityTitles[article.cityId]}
          </span>
        </div>
      </div>
      
      <div className="p-6">
        <div className="flex items-center gap-4 mb-4">
          <img
            src={article.author.avatarUrl}
            alt={article.author.displayName}
            className="w-10 h-10 rounded-full"
          />
          <div>
            <p className="text-sm font-medium text-gray-900">{article.author.displayName}</p>
            <div className="flex items-center text-sm text-gray-500">
              <Clock size={14} className="mr-1" />
              {article.readTime} <MinutesWord minutes={article.readTime} /> ·{' '}
              {new Date(article.publishedAt).toLocaleDateString('ru-RU', {
                month: 'long',
                day: 'numeric',
                year: 'numeric',
              })}
            </div>
          </div>
        </div>

        <h2 className={`font-bold text-gray-900 mb-2 ${featured ? 'text-2xl' : 'text-xl'}`}>
          {article.title}
        </h2>
        <p className="text-gray-600 line-clamp-2">{article.excerpt}</p>
        
        <div className="mt-4 flex items-center justify-between">
          <Link 
            to={`/article/${article.id}`}
            className="text-blue-600 font-medium hover:text-blue-800"
          >
            Читать →
          </Link>
          <div className="flex items-center text-gray-500">
            <ThumbsUp size={16} className="mr-1" />
            <span>{article.likes}</span>
          </div>
        </div>
      </div>
    </article>
  );
}