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

const Infomation: React.FC = () => {
  return (
    <div className={styles.container}>
      <Container className={styles.customContainer}>
        <div
          className={cls(
            styles.informationContainer,
            "columns is-flex is-variable is-4 is-flex-wrap-wrap"
          )}
        >
          {INFORMATION.map((item, index) => (
            <section
              className={cls(
                styles.item,
                item.url ? styles.hand : null,
                "column is-one-quarter-desktop is-half-tablet is-half-mobile"
              )}
              key={`info-${index}`}
              onClick={() => item.url && navigate(item.url)}
            >
              <Icon name={item.icon} />
              <h4 className={styles.h4}>{item.title}</h4>
              <p className={styles.p1}>{item.description}</p>
            </section>
          ))}
        </div>
      </Container>
    </div>
  )
}

export default Infomation