import type { FC } from 'react';
import React from 'react';
import { formatMessage } from '@theorchard/suite-frontend';
import { OATrackEditPageURL } from 'src/utils/oa';
import type { CrossAccountOsrConflictValidationMatch } from 'src/types';

const CLASS_NAME = 'TrackOSRValidation';

interface Props {
    matches: CrossAccountOsrConflictValidationMatch[];
    code: string;
}

const TrackOSRValidation: FC<Props> = ({ matches, code }) => (
    <div className={CLASS_NAME} data-testid={CLASS_NAME}>
        {formatMessage(`common.productValidations.codes.${code}_BODY`)}
        <div className={`${CLASS_NAME}Links`}>
            {$t(`common.fieldNames.links`)}:&nbsp;
            {matches.map((trackMatch, i) => [
                i > 0 && ', ',
                <a
                    href={OATrackEditPageURL(trackMatch.upc, trackMatch.tuid)}
                    key={trackMatch.tuid}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    {trackMatch.upc}
                </a>,
            ])}
        </div>
    </div>
);
export default TrackOSRValidation;