import { TTraining } from '../types'
import { calculateRating, formatTime, calculateDuration } from '../utils'
import RegistrationButton from './RegistrationButton'

const TrainingMeta = ({ training }: { training: TTraining }) => {
  return (
    <aside className='training-meta'>
      <div className='info'>
        <span className='caption'>Type</span>
        <span className='data' title={training.type.description}>
          {training.type.name}
        </span>
      </div>
      <div className='info'>
        <span className='caption'>Date</span>
        <span className='data'>{new Date(training.trainingDate).toLocaleString()}</span>
      </div>
      <div className='info'>
        <span className='caption'>Duration</span>
        <span className='data'>{formatTime(calculateDuration(training.blocks))} minutes</span>
      </div>

      <div className='info'>
        <span className='caption'>Location</span>
        <span className='data'>{training.location}</span>
      </div>
      <div className='info'>
        <span className='caption'>Registrations</span>
        <span className='data'>
          {training.registrations?.length ?? 0}
          <RegistrationButton training={training} />
        </span>
      </div>
      {/*<div className="info">
        <span className="caption">Attendance: </span>
        <span className="data">{training.attendance}</span>
      </div>
      <div className="info">
        <span className="caption">Rating: </span>
        <span className="data">
          {calculateRating(training.ratings)} [
          <a href="">{training.ratings.length}</a>] Rate it!
          <a href="">*</a>
          <a href="">*</a>
          <a href="">*</a>
          <a href="">*</a>
          <a href="">*</a>
        </span>
      </div>
          */}
      <style jsx>{`
        .info .caption {
          display: inline-block;
          font-weight: 900;
          min-width: 7em;
        }
      `}</style>
    </aside>
  )
}

export default TrainingMeta