import React, { useContext } from 'react'
import { Button } from '@siteone/pagebuilder-ui'
import Context from '../EventsContext'
import style from './style.scss'

const MediaLibraryBottom = ({
  count,
  minSizeInfo,
  hasSelected
}) => {
  const ctx = useContext(Context)
  return (
    <div className={style['media-library-search__bot-bar']}>
      <div className={style['media-library-search__bot-left']}>
        <span>
          Celkem: <strong>{count}</strong>
        </span>{' '}
        {minSizeInfo && (
          <span>
            Pouze obrázky větší než: <strong>{minSizeInfo}</strong>
          </span>
        )}
      </div>
      <div className={style['media-library-search__bot-right']}>
        <Button
          iconAfter='action/Tick'
          label='Potvrdit'
          type='button'
          variant='success'
          disabled={!hasSelected}
          onClick={ctx.handleConfirm}
        />
      </div>
    </div>
  )
}

export default MediaLibraryBottom