"use client";

import type { ProductBlockProps } from "../FdProductDetail";

export function ProductInfoBlock({ product, uiResourceMeta }: ProductBlockProps) {
    return (
        <div className="space-y-6">
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                {Object.entries(uiResourceMeta.properties)
                    .filter(([_, prop]) => prop.isDisplayable)
                    .map(([key, prop]) => {
                        const propertyMeta = uiResourceMeta.resourceMeta.properties[key];
                        const value = product[key];

                        return (
                            <div key={key} className="space-y-1">
                                <div className="text-sm font-medium text-muted-foreground">
                                    {propertyMeta.displayName}
                                </div>
                                <div className={`text-base ${prop.colorful ? "font-semibold" : ""}`}>
                                    {String(value ?? "-")}
                                </div>
                            </div>
                        );
                    })}
            </div>
        </div>
    );
}