import React from "react"
import cls from "classnames"
import * as styles from "./index.module.scss"
import { Container, CustomLink } from "@/components"
import { graphql, useStaticQuery } from "gatsby"
import {
  CAMPUS_RECRUITMENT_LINK,
  SOCIAL_RECRUITMENT_LINK,
  VIEW_OPEN_POSITIONS,
} from "@/constants/join-us"

const ViewPositions: React.FC = () => {
  const data = useStaticQuery<StrapiJoinUsImage>(graphql`
    query StrapViewPositionsQuery {
      strapiJoinUsPage {
        socialRecruitment {
          media {
            url
          }
        }
        campusRecruitment {
          media {
            url
          }
        }
      }
    }
  `)

  const socialImg = data.strapiJoinUsPage.socialRecruitment
  const campusImg = data.strapiJoinUsPage.campusRecruitment

  return (
    <div className={styles.viewPositions}>
      <Container>
        <div className="common-center-container">
          <h2 className="has-text-centered">{VIEW_OPEN_POSITIONS.title}</h2>
          <div className={styles.cardGroup}>
            <div className={styles.card}>
              <CustomLink linkTo={SOCIAL_RECRUITMENT_LINK}>
                <div
                  className={cls(styles.backgroundContainer, "card-animate-up")}
                  style={{ backgroundImage: `url(${socialImg.media.url})` }}
                >
                  <h3>{VIEW_OPEN_POSITIONS.socialRecruitment.title}</h3>
                  <p>{VIEW_OPEN_POSITIONS.socialRecruitment.subtitle}</p>
                </div>
              </CustomLink>
            </div>
            <div className={styles.card}>
              <CustomLink linkTo={CAMPUS_RECRUITMENT_LINK}>
                <div
                  className={cls(styles.backgroundContainer, "card-animate-up")}
                  style={{ backgroundImage: `url(${campusImg.media.url})` }}
                >
                  <h3>{VIEW_OPEN_POSITIONS.campusRecruitment.title}</h3>
                  <p>{VIEW_OPEN_POSITIONS.campusRecruitment.subtitle}</p>
                </div>
              </CustomLink>
            </div>
          </div>
        </div>
      </Container>
    </div>
  )
}

export default ViewPositions