import React from 'react';
import { usePage } from '@inertiajs/react';
import { Truck, ShieldCheck, PackageCheck } from "lucide-react";
import { useTranslation } from '@/hooks/useTranslation';

export default function LogisticsCard({ product }) {
    const { activeCurrency, appSettings } = usePage().props;
    const { t } = useTranslation();

    const targetRate = activeCurrency ? parseFloat(activeCurrency.exchange_rate) : 1;
    const currencySymbol = activeCurrency?.symbol || '$';
    
    const rawShipping = parseFloat(product.shipping_charge) || 0;
    const convertedShipping = (rawShipping * targetRate).toFixed(2);

    return (
        <div className="space-y-3 mb-8 text-sm bg-muted/20 p-4 rounded-xl border border-border/50">
            
            <div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
                <span className="text-muted-foreground col-span-1 sm:col-span-2">
                    {t('Lead Time')}
                </span>
                <div className="col-span-3 sm:col-span-4 font-bold text-foreground flex items-center gap-2">
                    <Truck className="w-4 h-4 text-primary" /> 
                    {product.shipping_time || t('Contact supplier for timeline')}
                </div>
            </div>

            <div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
                <span className="text-muted-foreground col-span-1 sm:col-span-2">
                    {t('Shipping')}
                </span>
                <div className="col-span-3 sm:col-span-4 font-medium text-foreground flex items-center gap-2">
                    {product.is_free_shipping ? (
                        <span className="text-green-600 font-bold flex items-center gap-1">
                            <PackageCheck className="w-4 h-4" /> {t('Free Shipping Globally')}
                        </span>
                    ) : (
                        <span>
                            {rawShipping > 0 
                                ? `${currencySymbol}${convertedShipping} ${product.shipping_charge_type === 'per_item' ? t('Per Item') : t('Flat Rate')}` 
                                : t('Calculated at checkout')} 
                            
                            {product.delivery_via && (
                                <> {t('via')} {product.delivery_via}</>
                            )}
                        </span>
                    )}
                </div>
            </div>

            <div className="grid grid-cols-4 sm:grid-cols-6 gap-2 items-center">
                <span className="text-muted-foreground col-span-1 sm:col-span-2">
                    {t('Protection')}
                </span>
                <div className="col-span-3 sm:col-span-4 flex items-center gap-2 font-medium">
                    <ShieldCheck className="w-4 h-4 text-green-600 shrink-0" /> 
                    <span className="truncate">
                        {t(appSettings?.protection_badge_name || 'Buyer Protection')}
                    </span> 
                    <span className="text-muted-foreground font-normal ml-1 hidden sm:inline truncate">
                        {t(appSettings?.protection_slogan || 'protects your orders from payment to delivery.')}
                    </span>
                </div>
            </div>

        </div>
    );
}