interface SidePeekSEOProps {
  title: string
  shouldInert?: boolean
}

// Sidepeeks generally have important content that should be indexed by search engines.
// The content is hidden behind a modal, but it is still important for SEO.
// This component is used to provide SEO information for the sidepeek content.
export default function SidePeekSEO({
  title,
  shouldInert = false,
  children,
}: React.PropsWithChildren<SidePeekSEOProps>) {
  return (
    // Both inert and sr-only to ensure that the content is not focusable
    // or visible to screen readers but still available for SEO.
    // The other possible options, such as aria-hidden and the hidden attribute,
    // are less suitable for SEO purposes.
    <div className="sr-only" inert={shouldInert}>
      <h2>{title}</h2>
      {children}
    </div>
  )
}