import * as React from "react"
import cls from "classnames"

import Container from "@/components/container"
import DetailBackground from "@/components/background/detail-background"

import * as styles from "./index.module.scss"
import ReturnButton from "@/components/return-button"
import { RETURN_BUTTON_KEY } from "@/constants/common"

export const HeaderBar: React.FC<CaseDetail> = props => {
  const { banner, title, description } = props

  return (
    <DetailBackground url={banner?.media?.url}>
      <Container className={styles.container}>
        <div className="columns is-flex is-flex-direction-column mb-0">
          <h2 className={cls("column is-two-thirds-desktop py-0")}>{title}</h2>
          <p
            className={cls(
              styles.description,
              "column is-two-thirds-desktop pt-4 pb-0"
            )}
          >
            {description}
          </p>
          <ReturnButton pageKey={RETURN_BUTTON_KEY.CASE} />
        </div>
      </Container>
    </DetailBackground>
  )
}