import React from 'react'; import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import { Popover, OverlayTrigger } from 'react-bootstrap'; import DeckStatusSummary from './DeckStatusSummary'; import './DeckStatus.scss'; const DeckStatus = ({ status }) => { const { t } = useTranslation(); let statusName; let className = classNames('deck-status', { invalid: !status.basicRules || !status.hasConjurations || !status.tenDice || !status.uniques, conjurations: !status.hasConjurations, valid: status.basicRules && status.hasConjurations && status.tenDice && status.uniques }); if (!status.basicRules || !status.hasConjurations || !status.tenDice || !status.uniques) { statusName = t('Invalid'); } else { statusName = t('Valid'); } const popover = ( <Popover id='deck-status-popover'> <Popover.Content> <div> <DeckStatusSummary status={status} /> </div> </Popover.Content> </Popover> ); return ( <OverlayTrigger placement='right' overlay={popover}> <span className={className}>{statusName}</span> </OverlayTrigger> ); }; export default DeckStatus;