import React from 'react'

import { CloseOutlined } from '@ant-design/icons'

import { IAudioDetail } from 'Activity/Activity.service'
import AudioControler from './AudioControler'
import style from '../css/AudioControler.module.scss'

interface AudioFixProp {
  audioDetail: IAudioDetail
  visible: boolean
  onClose: (e: React.MouseEvent<HTMLDivElement>) => void
}

const AudioFix: React.FC<AudioFixProp> = ({ audioDetail, visible, onClose }) => {
  return visible ? (
    <div className={style['custom-fixbox']}>
      <CloseOutlined className="custom-close" onClick={onClose} />
      <AudioControler audioDetail={audioDetail} showType="fixedleft" isPlay={true} />
    </div>
  ) : null
}

export default AudioFix
