import React, { useContext } from 'react';
import { Sidebar } from '@theorchard/suite-components';
import BulkUploadContext from 'src/components/bulkUploadContext';
import '../index.scss';

interface UnidentifiedAssetsSidebarProps {
    unidentifiedAssets: string[];
    isOpen: boolean;
    onClose: () => void;
}

const UnidentifiedAssetsSidebar = ({
    unidentifiedAssets,
    isOpen,
    onClose,
}: UnidentifiedAssetsSidebarProps) => {
    const { sidebarRef } = useContext(BulkUploadContext);

    return (
        <Sidebar
            isOpen={isOpen}
            onRequestClose={onClose}
            title={$t('bulkDigitalAudio.assetReport.unidentifiedAssets')}
            portalElement={sidebarRef.current}
            className="unidentified-assets-sidebar"
        >
            <ul className="unidentified-assets-list">
                {unidentifiedAssets.map(asset => (
                    <li key={asset}>{asset}</li>
                ))}
            </ul>
        </Sidebar>
    );
};

export default UnidentifiedAssetsSidebar;