import React from 'react';
import { Link } from '@inertiajs/react';
import { Badge } from '@/components/ui/badge';
import { TrendingUp } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation';

export default function TopStories({ topStories }) {
    const { t } = useTranslation();

    if (!topStories || topStories.length === 0) return null;

    return (
        <aside className="lg:sticky lg:top-24">
            <div className="rounded-xl border border-border bg-card shadow-sm overflow-hidden">
                
                <div className="flex items-center gap-2 px-5 py-4 border-b bg-muted/30">
                    <TrendingUp className="w-4 h-4 text-primary" />
                    <h3 className="font-bold text-sm uppercase tracking-wider text-foreground">
                        {t('_top_stories', 'Top Stories')}
                    </h3>
                </div>

                <div className="p-2">
                    {topStories.map((story, index) => (
                        <div key={story.id} className="group relative flex items-start gap-4 p-3 rounded-lg hover:bg-muted/50 transition-colors border-b border-border/40 last:border-0">
                            
                            <div className="flex-shrink-0 flex items-center justify-center">
                                <span className="text-2xl font-black text-muted-foreground/20 group-hover:text-primary/30 transition-colors tabular-nums">
                                    {String(index + 1).padStart(2, '0')}
                                </span>
                            </div>

                            <div className="space-y-1.5 flex-1 min-w-0">
                                {story.category && (
                                    <span className="text-[10px] font-bold text-primary uppercase tracking-widest block">
                                        {story.category.name}
                                    </span>
                                )}
                                
                                <h4 className="font-bold text-sm leading-snug text-foreground/90 group-hover:text-primary transition-colors line-clamp-3">
                                    <Link href={story.route_url} className="block">
                                        {story.title}
                                    </Link>
                                </h4>
                            </div>
                        </div>
                    ))}
                </div>
                
                <div className="px-5 py-3 bg-muted/20 border-t flex justify-center">
                    <p className="text-[10px] text-muted-foreground font-medium uppercase tracking-tighter">
                        {new Date().toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' })}
                    </p>
                </div>
            </div>
        </aside>
    );
}