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

export const CLASS_NAME = 'ProductBasicsBlockField';
export const CLASS_NAME_ROW = `${CLASS_NAME}-row`;
export const CLASS_NAME_COLUMN = `${CLASS_NAME}-column`;

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

const ProductBasicsBlockField: FC<Props> = ({ fieldName, field }) => {
    return (
        <div
            id={`ProductBasicsBlock-item-${fieldName}`}
            className="ProductBasicsBlock-item"
        >
            <div
                className={CLASS_NAME}
                data-testid={`${CLASS_NAME}-${fieldName}`}
            >
                <>
                    <div className={CLASS_NAME_ROW}>
                        <div className={CLASS_NAME_COLUMN}>
                            <Label
                                className={'fieldLabel'}
                                testId="productFieldLabel"
                                labelClassName="mb-0"
                                text={formatMessage(
                                    `common.fieldNames.${fieldName}`
                                )}
                            />
                            <div
                                className="value"
                                data-testid="productFieldValue"
                            >
                                <AnnotatedField
                                    field={field}
                                    trackHoverEventValue={formatMessage(
                                        `common.fieldNames.${fieldName}`
                                    )}
                                />
                            </div>
                        </div>
                    </div>
                </>
            </div>
        </div>
    );
};

export default ProductBasicsBlockField;