import * as React from 'react';
import Link from 'next/link';
import { TrendingUp } from 'lucide-react';
import { formatJapaneseDate } from '@/lib/utils/date';

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

export function TrendWidget({ articles }: TrendWidgetProps) {
  return (
    <div className="bg-[#1a1a1a] rounded-lg p-6">
      {/* Header */}
      <div className="flex items-center gap-2 mb-6">
        <TrendingUp className="w-5 h-5 text-[#FF6B00]" />
        <h3 className="text-xl font-bold text-white">trend</h3>
      </div>

      {/* Trending articles list */}
      <div className="space-y-4">
        {articles.map((article, index) => (
          <Link
            key={article.slug}
            href={`/post/${article.slug}`}
            className="flex gap-3 group"
          >
            {/* Number */}
            <span className="text-3xl font-bold text-gray-600 flex-shrink-0 w-8">
              {index + 1}
            </span>

            {/* 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 items-center gap-2 text-xs text-gray-500">
                {article.publicationDate && (
                  <time dateTime={article.publicationDate.toISOString()}>
                    {formatJapaneseDate(article.publicationDate)}
                  </time>
                )}
                {article.readingTime && (
                  <>
                    <span>•</span>
                    <span>{article.readingTime} minute</span>
                  </>
                )}
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}
