import React from 'react'
import { Icon } from '@siteone/pagebuilder-ui'
import { LoadingIcon } from '@siteone/pagebuilder-components';
import { styled } from '@siteone/system-core'

const RightIcon = styled(Icon)`
  float: right;
`

/**
 * 
 * @param {string} status error | ok
 */
const FileStatus = ({ status }) => {
  if (status === 'ok') {
    return <RightIcon name='action/Tick' size='30' color='green' />
  }

  if (status === 'error') {
    return <RightIcon name='alert/AttentionTriangle' size='30' color='red' />
  }

  return <LoadingIcon size="33px"/>
}

export default FileStatus