saveinmed/marketplace/src/components/GroupedProductCard.tsx

import { GroupedProduct, ProductWithDistance } from '../types/product'
import { formatCents } from '../utils/format'

interface GroupedProductCardProps {
    group: GroupedProduct
    onClick: () => void
}

export const GroupedProductCard = ({ group, onClick }: GroupedProductCardProps) => {
    const nearestOffer = group.offers.reduce((a, b) => a.distance_km < b.distance_km ? a : b)
    const soonestExpiry = group.offers.reduce((a, b) =>
        new Date(a.expires_at).getTime() < new Date(b.expires_at).getTime() ? a : b
    )
    const isExpiringSoon = new Date(soonestExpiry.expires_at).getTime() - Date.now() < 30 * 24 * 60 * 60 * 1000

    return (
        <div
            className="bg-white rounded-lg shadow-md p-4 hover:shadow-xl transition-all cursor-pointer border border-gray-100 hover:border-blue-300"
            onClick={onClick}
        >
            <div className="flex justify-between items-start mb-2">
                <div>
                    <h3 className="text-lg font-semibold text-gray-800">{group.name}</h3>
                    <p className="text-sm text-gray-500">{group.description}</p>
                </div>
                <div className="flex flex-col items-end gap-1">
                    {isExpiringSoon && (
                        <span className="bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded-full font-medium">
                            Vence em breve
                        </span>
                    )}
                    <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium">
                        {group.offerCount} {group.offerCount === 1 ? 'oferta' : 'ofertas'}
                    </span>
                </div>
            </div>

            <div className="mt-4 space-y-2">
                <div className="flex items-center text-sm text-blue-600">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    <span>Mais próximo: {nearestOffer.distance_km} km</span>
                </div>

                <div className="flex justify-between items-end mt-4">
                    <div>
                        <p className="text-xs text-gray-500">A partir de</p>
                        <div className="text-2xl font-bold text-green-600">
                            {formatCents(group.minPriceCents)}
                        </div>
                    </div>
                    <button
                        className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                        Ver ofertas
                    </button>
                </div>
            </div>
        </div>
    )
}