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

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

TutorialStep.displayName = 'TutorialStep'
