import { Image } from '@tidbcloud/uikit'
import { Collapse, Flex, Typography } from '@tidbcloud/uikit'
import { useState } from 'react'

export default ({ title, imageSrc }: { title: string; imageSrc: string }) => {
  const [active, setActive] = useState(false)

  const toggleActive = () => {
    setActive((preState) => !preState)
  }

  return (
    <>
      <Flex sx={() => ({ cursor: 'pointer' })}>
        <Typography variant="body-sm" inline>
          {title}
        </Typography>
        <Typography variant="body-sm" c="blue" ml={5} mb={10} inline onClick={toggleActive}>
          {active ? 'Hide' : 'Show'} instruction
        </Typography>
      </Flex>
      <Collapse in={active}>
        <Image src={imageSrc} />
      </Collapse>
    </>
  )
}