import * as React from "react"
import cls from "classnames"
import { graphql, useStaticQuery } from "gatsby"

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

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

type IProps = Pick<PracticeType, "title" | "keywords" | "tags">

export const BestPracticeHeader: React.FC<IProps> = props => {
  const { title, keywords: words = [], tags = [] } = props
  const keywords = Array.from(new Set(words))
  const data = useStaticQuery<{
    strapiBestPracticePage: BestPracticeImage
  }>(graphql`
    query BestPracticeHeaderImageQuery {
      strapiBestPracticePage {
        detailsBanner {
          media {
            url
          }
        }
      }
    }
  `)
  const {
    strapiBestPracticePage: {
      detailsBanner: {
        media: { url },
      },
    },
  } = data

  return (
    <DetailBackground url={url}>
      <Container className={styles.container}>
        <div className={cls(styles.tagArea, "pb-4")}>
          {tags.map(tag => {
            return (
              <span className={styles.tag} key={tag}>
                {tag}
              </span>
            )
          })}
        </div>
        <h1>{title}</h1>
        {keywords && (
          <div className={cls(styles.tagContainer)}>
            {keywords.map(keyWord => (
              <span className="mt-5" key={keyWord}>
                {keyWord}
              </span>
            ))}
          </div>
        )}
        <ReturnButton pageKey={RETURN_BUTTON_KEY.BEST_PRACTICE} />
      </Container>
    </DetailBackground>
  )
}