import { Product } from "../types/product";
import CurrencySymbol from "./CurrencySymbol";

type ProductHeaderProps = {
    product: Product;
};

export default function ProductHeader({ product }: ProductHeaderProps) {
    return (
        <div className="text-center mb-2">
            <h1 className="text-2xl font-bold text-secondary mb-2 mt-4">
                {product.name}
            </h1>

            <p className="text-gray-600">{product.short_description}</p>

            {product.icons && product.icons.length > 0 && (
                <div className="flex items-center justify-center gap-4 mt-4 flex-col">
                    {product.icons.map((icon: any) => (
                        <div key={icon.id} className="flex items-center gap-2">
                            <img
                                src={icon.image}
                                alt={icon.text || "Icon"}
                                className="w-6 h-6 object-contain"
                            />
                            <span className="text-sm text-gray-600">{icon.text}</span>
                        </div>
                    ))}
                </div>
            )}

            <div className="mt-4 text-primary font-bold text-xl inline-flex items-center gap-1">
                <span>{product.price}</span>
                <CurrencySymbol currency={product.currency} />
            </div>
        </div>
    );
}