import Link from 'next/link'

interface TrendingArticle {
  id: number
  title_burmese: string
  slug: string
  view_count: number
  category_name_burmese: string
}

export default function TrendingSection({ articles }: { articles: TrendingArticle[] }) {
  if (articles.length === 0) return null

  return (
    <div className="bg-white rounded-lg shadow p-6">
      <h3 className="text-lg font-bold text-gray-900 mb-4 font-burmese flex items-center">
        <svg className="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd" />
        </svg>
        လူကြိုက်များသော
      </h3>
      <ol className="space-y-3">
        {articles.map((article, index) => (
          <li key={article.id} className="flex items-start space-x-3">
            <span className="flex-shrink-0 w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-sm font-bold">
              {index + 1}
            </span>
            <Link 
              href={`/article/${article.slug}`}
              className="flex-1 text-gray-700 hover:text-primary-600 font-burmese text-sm line-clamp-2 leading-snug"
            >
              {article.title_burmese}
            </Link>
          </li>
        ))}
      </ol>
    </div>
  )
}