import { className } from 'lib/css'
import { useGeneratedId, useSkiplinkTarget } from 'ui/hooks/seamly-hooks'

const Prompt = ({ baseClassName, children, title }) => {
  const skiplinkTargetId = useSkiplinkTarget()
  const containerHeadingId = useGeneratedId()

  return (
    <section
      id={skiplinkTargetId}
      className={className(baseClassName)}
      aria-describedby={containerHeadingId}
      tabIndex={-1}
    >
      <h2
        className={className(`${baseClassName}__title`)}
        id={containerHeadingId}
      >
        {title}
      </h2>
      {children}
    </section>
  )
}

export default Prompt