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

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

export function PopularPosts({ articles }: PopularPostsProps) {
  return (
    <aside className="lg:sticky lg:top-24 space-y-6">
      {/* Section heading */}
      <div>
        <h2 className="text-2xl font-bold text-white mb-2">
          Popular Posts
        </h2>
        <div className="h-1 w-16 bg-gradient-to-r from-[#FF6B00] to-[#FFA500] rounded-full" />
      </div>

      {/* Popular posts list */}
      <div className="space-y-4">
        {articles.map((article) => (
          <Link
            key={article.slug}
            href={`/post/${article.slug}`}
            className="block group"
          >
            <article className="flex gap-3 p-3 rounded-lg bg-[#1a1a1a] hover:bg-[#222] transition-colors">
              {/* Thumbnail */}
              {article.cardImage && (
                <div className="relative w-20 h-20 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 */}
                <h3 className="text-sm font-semibold text-white line-clamp-2 mb-2 group-hover:text-[#FF6B00] transition-colors">
                  {article.title}
                </h3>

                {/* Category badge */}
                {article.category && (
                  <Badge 
                    variant="secondary" 
                    className="text-xs mb-2"
                  >
                    {article.category}
                  </Badge>
                )}

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