import type { FC } from 'react';
import React from 'react';
import { Section } from '@theorchard/suite-components';
import cx from 'classnames';
import AnnotatedArtworkBlock from 'src/components/revision/annotatedArtworkBlock';
import type { ProductField } from 'src/product/fields/field';
import type { MergedProduct } from 'src/product/product';

export const CLASS_NAME = 'ProductArtworkPanel';

export interface Props {
    field: ProductField<string>;
    product: MergedProduct;
}

const ProductArtworkPanel: FC<Props> = ({ field, product }) => {
    return (
        <Section
            testId={CLASS_NAME}
            className={cx(CLASS_NAME, 'py-4 px-4', {
                revision: field.isRevised,
            })}
        >
            <AnnotatedArtworkBlock field={field} product={product} />
        </Section>
    );
};

export default ProductArtworkPanel;