import React from 'react';
import { Card, CardContent } from "@/Components/ui/card";
import { useTranslation } from '@/hooks/useTranslation';

export default function ProductDetails({ product }) {
    const { t } = useTranslation();

    return (
        <div className="space-y-6">
            {product?.specifications?.length > 0 && (
                <Card className="shadow-sm border-border/50 overflow-hidden">
                    <div className="border-b bg-muted/20 px-6 py-4 font-semibold text-primary">
                        {t('Key Attributes')}
                    </div>
                    <CardContent className="p-0">
                        <table className="w-full text-sm text-left">
                            <tbody className="divide-y divide-border">
                                {product.specifications.map((spec, idx) => (
                                    <tr key={idx} className="hover:bg-muted/30 transition-colors">
                                        <td className="px-6 py-3 bg-muted/5 font-medium text-muted-foreground w-1/3 border-r">
                                            {t(spec.name)}
                                        </td>
                                        <td className="px-6 py-3 text-foreground font-semibold">
                                            {spec.value}
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </CardContent>
                </Card>
            )}

            {product?.customization_options?.length > 0 && (
                <Card className="shadow-sm border-border/50 overflow-hidden">
                    <div className="border-b bg-muted/20 px-6 py-4 font-semibold text-primary">
                        {t('Customization Options')}
                    </div>
                    <CardContent className="p-6">
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            {product.customization_options.map((cust, idx) => (
                                <div key={idx} className="flex justify-between items-center p-4 border rounded-xl bg-muted/10">
                                    <span className="font-semibold">{cust.type}</span>
                                    <span className="text-xs bg-primary/10 text-primary px-2.5 py-1 rounded-md font-bold">
                                        {t('MOQ: :moq', { moq: cust.moq })}
                                    </span>
                                </div>
                            ))}
                        </div>
                    </CardContent>
                </Card>
            )}

            <Card className="shadow-sm border-border/50 overflow-hidden">
                <div className="border-b bg-muted/20 px-6 py-4 flex gap-6 font-semibold text-primary">
                    {t('Product Details')}
                </div>
                <CardContent className="p-6 md:p-10">
                    <div className="prose prose-sm sm:prose-base dark:prose-invert max-w-none prose-img:rounded-xl prose-img:border" 
                        dangerouslySetInnerHTML={{ 
                            __html: product?.description || `<p class="text-muted-foreground italic">${t('No detailed description provided by the supplier.')}</p>` 
                        }} 
                    />
                </CardContent>
            </Card>

            {product?.refund_policy && (
                <Card className="shadow-sm border-orange-500/20 bg-orange-500/5 overflow-hidden">
                    <div className="border-b border-orange-500/20 px-6 py-4 font-bold text-orange-700">
                        {t('Refund & Return Policy')}
                    </div>
                    <CardContent className="p-6 text-sm text-orange-900/80 leading-relaxed whitespace-pre-wrap">
                        {product.refund_policy}
                    </CardContent>
                </Card>
            )}
        </div>
    );
}