import type { FC } from 'react';
import React from 'react';
import { Button } from '@theorchard/suite-components';

export const CLASSNAME = 'ReferenceChangeConfirmation';

interface Props {
    onCancel: () => void;
    onConfirm: () => void;
}

const ReferenceChangeConfirmation: FC<Props> = ({ onCancel, onConfirm }) => {
    return (
        <div className={CLASSNAME}>
            <div className={`${CLASSNAME}-content`}>
                {$t(
                    'ownershipRights.metadataPopup.referenceConfirmationContent'
                )}
            </div>

            <ul className={`${CLASSNAME}-fields`}>
                <li>Song Name</li>
                <li>Version</li>
            </ul>
            <div className={`${CLASSNAME}-buttons`}>
                <Button size="sm" onClick={onCancel}>
                    {$t('common.cancel')}
                </Button>
                <Button variant="primary" size="sm" onClick={onConfirm}>
                    {$t('ownershipRights.metadataPopup.referenceChangeConfirm')}
                </Button>
            </div>
        </div>
    );
};

export default ReferenceChangeConfirmation;