import React from 'react';
import MacroBadge from './MacroBadge';

interface HistoryCardProps {
    item: {
        id: string;
        img: string;
        category: string;
        details?: string;
        cals: number;
        score: number;
        date: string;
        protein: string;
        carbs: string;
        fat: string;
    };
    fallback: string;
}

const HistoryCard: React.FC<HistoryCardProps> = ({ item, fallback }) => (
    <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-premium hover:-translate-y-1 transition-all duration-300 group cursor-pointer h-full flex flex-col">
        <div className="h-36 overflow-hidden relative bg-gray-100">
            <img
                src={item.img}
                alt={item.category}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                onError={(e) => {
                    const target = e.currentTarget;
                    // Proteção contra Loop Infinito de Erros
                    if (target.src !== fallback) {
                        target.src = fallback;
                    }
                }}
            />
            <div className="absolute top-0 inset-x-0 h-16 bg-gradient-to-b from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div className="absolute top-2 right-2 bg-black/60 backdrop-blur-md text-white text-[10px] font-bold px-2 py-1 rounded-full border border-white/10">
                {item.cals} kcal
            </div>
            {item.score > 0 && (
                <div className={`absolute bottom-2 left-2 text-[10px] font-bold px-2 py-0.5 rounded-full shadow-lg text-white border border-white/20 ${item.score >= 80 ? 'bg-green-500' : 'bg-yellow-500'}`}>
                    Score {item.score}
                </div>
            )}
        </div>
        <div className="p-4 flex-1 flex flex-col">
            <h5 className="font-bold text-gray-900 text-base mb-1 truncate group-hover:text-brand-600 transition-colors">{item.category}</h5>
            {item.details && <p className="text-xs text-gray-500 mb-3 line-clamp-1">{item.details}</p>}

            <div className="mt-auto pt-3 border-t border-gray-50 flex justify-between items-center text-[10px] text-gray-400">
                <span>{item.date}</span>
            </div>

            <div className="flex gap-2 mt-3">
                <div className="flex-1 bg-gray-50 rounded-lg px-2 py-1.5 text-center group-hover:bg-brand-50/50 transition-colors">
                    <span className="block text-[8px] text-gray-400 font-bold uppercase">Prot</span>
                    <span className="text-xs font-bold text-gray-700">{item.protein}</span>
                </div>
                <div className="flex-1 bg-gray-50 rounded-lg px-2 py-1.5 text-center group-hover:bg-blue-50/50 transition-colors">
                    <span className="block text-[8px] text-gray-400 font-bold uppercase">Carb</span>
                    <span className="text-xs font-bold text-gray-700">{item.carbs}</span>
                </div>
            </div>
        </div>
    </div>
);

export default HistoryCard;
