import React from 'react';
import { Pill } from '@theorchard/suite-components';
import ArtworkValidationPopover from './artworkValidationPopover';
import type { MergedProduct } from 'src/product/product';

interface ProductArtworkValidationProps {
    product: MergedProduct;
}

const CLASS_NAME = 'ArtworkValidation';

const ArtworkValidationPill = ({ product }: ProductArtworkValidationProps) => {
    const { artworkCompliance } = product.basics;

    if (!artworkCompliance || artworkCompliance.length === 0) return null;

    return (
        <Pill
            testId={`artwork-validation-pill`}
            iconName={'warning'}
            indicator={'warning'}
            variant={'warning'}
            className={`${CLASS_NAME}Pill`}
            popoverOptions={{
                id: 'artworkErrorPopover',
                placement: 'bottom-start',
                content: (
                    <ArtworkValidationPopover
                        artworkComplianceMatches={artworkCompliance}
                    />
                ),
            }}
        />
    );
};

export default ArtworkValidationPill;