import { FunctionComponent } from 'react'
import { TTrainingArchiveItem } from '../types'
import Link from 'next/link'
import TrainingTypeButton from './TrainingTypeButton'

const TrainingHint: FunctionComponent<{ training: TTrainingArchiveItem }> = ({ training }) => {
  return (
    <Link href='/training/[id]' as={`/training/${training.id}`}>
      <a>
        <li>
          <div>{training.title}</div>
          <div>{new Date(training.trainingDate).toLocaleString()}</div>
          <div>
            <TrainingTypeButton trainingType={training.type} />
          </div>
          <style jsx>{``}</style>
        </li>
      </a>
    </Link>
  )
}

export default TrainingHint
