import React from "react"
import { Container } from "@/components"
import t from "@/constants/wording"
import cls from "classnames"
import { navigate } from "gatsby"
import * as styles from "./index.module.scss"
import { FOLLOW_US } from "@/constants/contact"

const FollowUs: React.FC = () => {
  return (
    <div className={styles.container}>
      <Container className={styles.customContainer}>
        <h2 className={styles.h2}>{t("follow us")}</h2>
        <section
          className={cls(
            styles.followContainer,
            "columns is-flex is-variable is-4 is-flex-wrap-wrap	"
          )}
        >
          {FOLLOW_US.map((item, index) => (
            <div
              className={cls(
                styles.followItem,
                item.url ? styles.hand : null,
                "column is-half-desktop is-half-tablet is-full-mobile"
              )}
              key={`follow-${index}`}
              onClick={() => item.url && navigate(item.url)}
            >
              <div className={styles.content}>
                <div className={styles.info}>
                  <p>{item.row1}</p>
                  <p>{item.row2}</p>
                </div>
                <div className={styles.image}>
                  <img src={item.image} alt={item.alt} />
                </div>
              </div>
            </div>
          ))}
        </section>
      </Container>
    </div>
  )
}

export default FollowUs