import { FC } from "react";
import { isNil } from "lodash";
import { Text } from "@mantine/core";
import { ProductSchema } from "@/lib/client";

type ProductFieldNames = {
    [K in keyof ProductSchema]: string;
};

export const ProductFieldNames: Partial<ProductFieldNames> = {
    color: "Цвет",
    article: "Артикул",
    size: "Размер",
    brand: "Бренд",
    composition: "Состав",
    additionalInfo: "Доп. информация",
};

type Props = {
    product: ProductSchema;
};

const ProductFieldsList: FC<Props> = ({ product }) => {
    const fieldList = Object.entries(product).map(([key, value]) => {
        const fieldName = ProductFieldNames[key as keyof ProductSchema];
        if (!fieldName || isNil(value) || value === "") return null;
        return (
            <Text key={fieldName}>
                {fieldName}: {value.toString()}{" "}
            </Text>
        );
    });

    return <>{fieldList}</>;
};

export default ProductFieldsList;
