import React from 'react'

import { Box, H5, v } from '../index'
import { tutorialColors } from './consts'
import { TutorialStepProps } from './tutorial.types'

export const TutorialStep = ({ active, content, title }: TutorialStepProps) => (
  <v.div className="vui-tutorialStep" hidden={!active} pb={2}>
    <H5 color={tutorialColors.color} fontWeight="medium" mb={1}>
      {title}
    </H5>
    <Box>{content}</Box>
  </v.div>
)

TutorialStep.displayName = 'TutorialStep'
