import Link from 'next/link';
import { formatDate } from '@/lib/markdown';
import { Clock } from 'lucide-react';

export default function ArticleCard({ article, featured = false }) {
  if (featured) {
    return (
      <Link
        href={`/blog/${article.slug}`}
        className="article-card block group p-8 sm:p-10 border-accent/30 hover:border-accent"
      >
        <div className="flex flex-wrap items-center gap-2 mb-4">
          {(article.tags || []).slice(0, 3).map(t => (
            <span key={t} className="tag">#{t}</span>
          ))}
        </div>
        <h2 className="text-2xl sm:text-3xl font-bold mb-3 group-hover:text-accent2 transition-colors leading-tight">
          {article.title}
        </h2>
        {article.excerpt && (
          <p className="text-mute text-base sm:text-lg leading-relaxed line-clamp-3 mb-4">
            {article.excerpt}
          </p>
        )}
        <div className="flex items-center gap-4 text-xs text-mute">
          <span>{formatDate(article.published_at)}</span>
          {article.reading_time && (
            <span className="inline-flex items-center gap-1">
              <Clock className="w-3 h-3" /> {article.reading_time} мин
            </span>
          )}
        </div>
      </Link>
    );
  }

  return (
    <Link href={`/blog/${article.slug}`} className="article-card block group">
      <div className="flex flex-wrap items-center gap-2 mb-3">
        {(article.tags || []).slice(0, 2).map(t => (
          <span key={t} className="tag">#{t}</span>
        ))}
      </div>
      <h3 className="text-lg font-semibold mb-2 group-hover:text-accent2 transition-colors leading-snug">
        {article.title}
      </h3>
      {article.excerpt && (
        <p className="text-mute text-sm line-clamp-3 mb-4">{article.excerpt}</p>
      )}
      <div className="flex items-center gap-3 text-xs text-mute">
        <span>{formatDate(article.published_at)}</span>
        {article.reading_time && (
          <span className="inline-flex items-center gap-1">
            <Clock className="w-3 h-3" /> {article.reading_time} мин
          </span>
        )}
      </div>
    </Link>
  );
}