import AddressModal from './AddressModal'
import { Icon } from '$core-components'
import './AddressImportWarning.scss'
import { t } from '$themelocalization'

const AddressImportWarning = ({ showModal, setShowModal, rowsWithErrors = [] }) => {
	return (
		<AddressModal
			className='address-import-warning-modal'
			open={showModal}
			actionButtonText={t('AddressImportWarning.Button.Close')}
			onAction={() => {
				setShowModal(false)
			}}
			onCancel={() => {
				setShowModal(false)
			}}
		>
			<div className='address-import-warning-modal-body'>
				<div className='address-import-warning-modal-icon'>
					<Icon name='error.svg' width='30px' height='30px' />
				</div>
				{rowsWithErrors.length > 0 ? (
					<div className='address-import-warning-modal-content'>
						<p>{t('AddressImportWarning.InvalidValues')}</p>
						<p>{t('AddressImportWarning.PossibleIssues')}</p>
						<p>{t('AddressImportWarning.RowsSkipped')}</p>
						<p>{rowsWithErrors.length > 10 ? rowsWithErrors.slice(0, 10).join(', ') + '...' : rowsWithErrors.join(', ')}</p>
					</div>
				) : (
					<p>{t('AddressImportWarning.InvalidFormat')}</p>

				)}
			</div>
		</AddressModal>
	)
}

export default AddressImportWarning
