import { ProductWithDistance } from '../types/product'

interface ProductCardProps {
    product: ProductWithDistance
    onAddToCart: (product: ProductWithDistance) => void
}

export const ProductCard = ({ product, onAddToCart }: ProductCardProps) => {
    const isExpiringSoon = new Date(product.expires_at).getTime() - Date.now() < 30 * 24 * 60 * 60 * 1000 // 30 days

    return (
        <div className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow border border-gray-100">
            <div className="flex justify-between items-start mb-2">
                <div>
                    <h3 className="text-lg font-semibold text-gray-800">{product.name}</h3>
                    <p className="text-sm text-gray-500">{product.description}</p>
                </div>
                {isExpiringSoon && (
                    <span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full font-medium">
                        Vence em breve
                    </span>
                )}
            </div>

            <div className="mt-4 space-y-2">
                <div className="flex justify-between items-center text-sm">
                    <span className="text-gray-600">Lote: {product.batch}</span>
                    <span className="font-mono text-gray-500">Val: {new Date(product.expires_at).toLocaleDateString()}</span>
                </div>

                <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>{product.distance_km} km • {product.tenant_city}/{product.tenant_state}</span>
                </div>

                <div className="flex justify-between items-end mt-4">
                    <div className="text-2xl font-bold text-green-600">
                        R$ {(product.price_cents / 100).toFixed(2).replace('.', ',')}
                    </div>
                    <button
                        onClick={() => onAddToCart(product)}
                        className="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
                    >
                        Adicionar
                    </button>
                </div>
            </div>
        </div>
    )
}
