import * as React from "react"
import { Container, ListLayout, ImgIcon, CustomLink } from "@/components"
import { HOME_MORE_RESOURCE } from "@/constants/home"
import * as styles from "./index.module.scss"

const MoreResource: React.FC = () => {
  return (
    <section className={styles.homeMoreResource}>
      <Container>
        <ListLayout listData={HOME_MORE_RESOURCE}>
          {item => (
            <div className={styles.inner}>
              <CustomLink linkTo={item.link} className={styles.iconLink}>
                <ImgIcon
                  className={styles.icon}
                  name={item.icon}
                  alt={item.name}
                />
              </CustomLink>
              <h3>
                <CustomLink linkTo={item.link}>{item.name}</CustomLink>
              </h3>
              <p>{item.description}</p>
            </div>
          )}
        </ListLayout>
      </Container>
    </section>
  )
}

export default MoreResource