import Link from 'next/link'
import Image from 'next/image'

interface Article {
  id: number
  title_burmese: string
  slug: string
  excerpt_burmese: string
  category_name_burmese: string
  category_slug: string
  reading_time: number
  published_at: string
  featured_image?: string
}

export default function ArticleCard({ article }: { article: Article }) {
  const publishedDate = new Date(article.published_at).toLocaleDateString('my-MM', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })

  return (
    <article className="bg-white rounded-lg shadow hover:shadow-lg transition-shadow duration-200 overflow-hidden article-card">
      <Link href={`/article/${article.slug}`}>
        {article.featured_image && (
          <div className="relative h-48 w-full">
            <Image
              src={article.featured_image}
              alt={article.title_burmese}
              fill
              className="object-cover"
            />
          </div>
        )}
        
        <div className="p-6">
          {/* Category Badge */}
          <Link 
            href={`/category/${article.category_slug}`}
            className="inline-block px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium font-burmese mb-3 hover:bg-primary-200"
            onClick={(e) => e.stopPropagation()}
          >
            {article.category_name_burmese}
          </Link>

          {/* Title */}
          <h2 className="text-xl font-bold text-gray-900 mb-2 font-burmese hover:text-primary-600 line-clamp-2">
            {article.title_burmese}
          </h2>

          {/* Excerpt */}
          <p className="text-gray-600 mb-4 font-burmese line-clamp-3 leading-relaxed">
            {article.excerpt_burmese}
          </p>

          {/* Meta */}
          <div className="flex items-center text-sm text-gray-500 space-x-4">
            <span>{publishedDate}</span>
            <span>•</span>
            <span className="font-burmese">{article.reading_time} မိနစ်</span>
          </div>
        </div>
      </Link>
    </article>
  )
}