import * as React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { formatJapaneseDate } from '@/lib/utils/date';

interface MostReadWidgetProps {
  articles: {
    slug: string;
    title: string;
    cardImage: string | null;
    publicationDate: Date | null;
    category: string | null;
    readingTime: number | null;
  }[];
}

export function MostReadWidget({ articles }: MostReadWidgetProps) {
  return (
    <div className="bg-[#1a1a1a] rounded-lg p-6">
      {/* Header */}
      <h3 className="text-xl font-bold text-white mb-6">Most Read Articles</h3>

      {/* Most read articles list */}
      <div className="space-y-4">
        {articles.map((article) => (
          <Link
            key={article.slug}
            href={`/post/${article.slug}`}
            className="flex gap-3 group"
          >
            {/* Thumbnail */}
            {article.cardImage && (
              <div className="relative w-20 h-16 flex-shrink-0 rounded-md overflow-hidden">
                <Image
                  src={article.cardImage}
                  alt={article.title}
                  fill
                  loading="lazy"
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                  sizes="80px"
                />
              </div>
            )}

            {/* Content */}
            <div className="flex-1 min-w-0">
              {/* Title */}
              <h4 className="text-sm font-medium text-gray-300 group-hover:text-[#FF6B00] transition-colors line-clamp-2 mb-2">
                {article.title}
              </h4>

              {/* Meta info */}
              <div className="flex flex-wrap items-center gap-2 text-xs text-gray-500">
                {article.category && (
                  <span className="text-gray-400">{article.category}</span>
                )}
                {article.publicationDate && (
                  <>
                    {article.category && <span>•</span>}
                    <time dateTime={article.publicationDate.toISOString()}>
                      {formatJapaneseDate(article.publicationDate)}
                    </time>
                  </>
                )}
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}
