import React from 'react';
import { Link } from '@inertiajs/react';

export default function GridItem({ post }) {
    
    const getPlaceholder = (title) => {
        return `https://ui-avatars.com/api/?name=${encodeURIComponent(title)}&background=random&color=fff&size=400&font-size=0.3`;
    };

    return (
        <Link 
            href={post.route_url} 
            className="group flex flex-col space-y-2 transition-all duration-300"
        >
            {/* --- IMAGE SECTION (No Animation) --- */}
            <div className="aspect-[4/3] overflow-hidden rounded-lg border border-border/50 bg-muted shadow-sm group-hover:border-primary/20 transition-colors">
                <img 
                    src={post.image_path || getPlaceholder(post.title)} 
                    alt={post.title}
                    className="w-full h-full object-cover transition-none dark:brightness-90"
                />
            </div>

            {/* --- CONTENT SECTION --- */}
            <div className="space-y-1 px-0.5">
                {post.category && (
                    <span className="text-[9px] font-bold uppercase tracking-wider text-primary/80 block leading-none"> 
                        {post.category.name}
                    </span>
                )}
                
                {/* --- TITLE: Smaller Weight (Semibold) & Clean Look --- */}
                <h4 className="text-[13px] sm:text-sm font-semibold leading-snug text-foreground/90 transition-colors group-hover:text-primary line-clamp-3 font-sans"> 
                    {post.title}
                </h4>
            </div>
        </Link>
    );
}