import React from 'react';
import { Link } from '@inertiajs/react';
import { Newspaper } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation';

export default function InlineRelatedWidget({ categoryName, posts }) {
    const { t } = useTranslation();

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

    const mainPost = posts[0];
    const listPosts = posts.slice(1);

    const getPlaceholder = (title) => {
        return `https://ui-avatars.com/api/?name=${encodeURIComponent(title)}&background=random&color=fff&size=512`;
    };

    return (
        <div className="my-10 border-t border-b border-border py-8 animate-in fade-in not-prose font-sans">
            
            <div className="flex items-center gap-2 mb-6">
                <div className="bg-primary/10 p-1.5 rounded-full">
                    <Newspaper className="w-4 h-4 text-primary" />
                </div>
                <h3 className="font-bold text-xl text-foreground font-serif tracking-tight">
                    {t('_more_in', 'More in')} {categoryName || t('_news_title', 'News')}
                </h3>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                
                <Link 
                    href={mainPost.route_url} 
                    prefetch 
                    className="group block no-underline"
                >
                    <div 
                        style={{ borderRadius: 'var(--radius)' }}
                        className="aspect-[16/10] w-full overflow-hidden bg-muted mb-3 relative border border-border shadow-sm"
                    >
                        <img 
                            src={mainPost.image_path || getPlaceholder(mainPost.title)} 
                            alt={mainPost.title} 
                            className="w-full h-full object-cover"
                        />
                    </div>
                    <h4 className="font-bold text-lg md:text-xl leading-snug group-hover:text-primary transition-colors font-serif mt-3">
                        {mainPost.title}
                    </h4>
                </Link>

                <div className="flex flex-col gap-5 justify-center">
                    {listPosts.map(post => (
                        <Link 
                            key={post.id} 
                            href={post.route_url} 
                            prefetch 
                            className="group flex gap-4 items-start border-b border-border/50 pb-5 last:border-0 last:pb-0 no-underline"
                        >
                            <div 
                                style={{ borderRadius: 'calc(var(--radius) - 2px)' }}
                                className="w-28 h-20 shrink-0 bg-muted overflow-hidden border border-border relative"
                            >
                                <img 
                                    src={post.image_path || getPlaceholder(post.title)} 
                                    alt={post.title}
                                    className="w-full h-full object-cover"
                                />
                            </div>
                            <h5 className="text-base font-semibold leading-snug group-hover:text-primary transition-colors line-clamp-3 flex-1 min-w-0 font-serif">
                                {post.title}
                            </h5>
                        </Link>
                    ))}
                </div>
            </div>
        </div>
    );
}