import { TrainingType } from '../../gql'
import theme from '../../styles/theme'

const TrainingTypeButton = ({ trainingType }: { trainingType?: TrainingType }) => {
  if (!trainingType) return null
  return (
    <span className='training-type'>
      {trainingType.name}
      <span className='training-type-description'>{trainingType.description}</span>
      <style jsx>{`
        .training-type {
          position: relative;
          padding: 0.1em 0.4em;
          font-size: 80%;
          background-color: ${theme.colors.balloonBackground};
          color: ${theme.colors.balloon};
        }
        .training-type .training-type-description {
          display: none;
          position: absolute;
          padding: 0.4em;
          margin-bottom: 10px;
          bottom: 100%;
          min-width: 10em;
          left: 0;
        }
        .training-type:hover .training-type-description {
          display: block;
          background-color: ${theme.colors.balloonBackground};
          color: ${theme.colors.balloon};
          border: 1px solid ${theme.colors.balloon};
        }
        .training-type-description::after,
        .training-type-description::before {
          content: '';
          display: block;
          position: absolute;
          bottom: -10px;
          left: 3px;
          width: 10px;
          height: 10px;
          z-index: 1;
          background-color: ${theme.colors.balloonBackground};
          border: 1px solid ${theme.colors.balloonBackground};
          border-left: 1px solid ${theme.colors.balloon};
          clip-path: polygon(0 0, 100% 0, 0 100%);
          transform: skewX(45deg);
        }
        .training-type-description::after {
          left: 3px;
          border-left: 1px solid ${theme.colors.balloonBackground};
          border-right: 1px solid ${theme.colors.balloon};
          clip-path: polygon(0 0, 100% 0, 100% 100%);
          transform: skewX(-45deg);
        }
      `}</style>
    </span>
  )
}
export default TrainingTypeButton
