import type { FC } from 'react';
import React from 'react';
import { Label } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import type { ProductField } from 'src/product/fields/field';

interface Props {
    fieldName: string;
    field: ProductField<number | string>;
}

const CLASS_NAME = 'ProductBasicsBlock';

const ProductBasicsField: FC<Props> = ({ fieldName, field }) => (
    <div
        id={`${CLASS_NAME}-item-${fieldName}`}
        className={`${CLASS_NAME}-item`}
    >
        <div className={CLASS_NAME} data-testid={`${CLASS_NAME}-${fieldName}`}>
            <div className="row">
                <div className="col-40">
                    <Label
                        className="productFieldLabel"
                        labelClassName="mb-0"
                        text={formatMessage(`common.fieldNames.${fieldName}`)}
                    />
                </div>
                <div className="productFieldValue col-60">{field.get()}</div>
            </div>
        </div>
    </div>
);

export default ProductBasicsField;