import * as React from "react"
import { Link } from "gatsby"
import { Container, ListLayout, ImgIcon } from "@/components"
import { CONTACT_US } from "@/constants/about-us"
import * as styles from "./index.module.scss"

const ContactUsMore: React.FC = () => {
  return (
    <div className={styles.contactUsMore}>
      <Container isSmall={true}>
        <ListLayout listData={CONTACT_US}>
          {item => (
            <div className={styles.inner}>
              <ImgIcon name={item.icon} className={styles.icon} />
              <h3>{item.title}</h3>
              <p>{item.description}</p>
              <div className={styles.btnContent}>
                <Link className="button is-primary" to={item.link}>
                  {item.linkName}
                </Link>
              </div>
            </div>
          )}
        </ListLayout>
      </Container>
    </div>
  )
}

export default ContactUsMore