import React from "react"
import cls from "classnames"
import { Container, ImgIcon } from "@/components"
import * as styles from "./index.module.scss"

interface IProps {
  title: string
  features: {
    icon: string
    description: string
  }[]
}

const JoinUsFeatures: React.FC<IProps> = ({ title, features }) => {
  return (
    <Container>
      <div className={cls(styles.joinUsFeatures, "common-center-container")}>
        <h2 className="has-text-centered">{title}</h2>
        <div
          className={cls(
            "is-flex is-justify-content-space-between has-text-centered",
            features.length == 4 ? "is-flex-wrap-wrap" : "",
            styles.allFeatures
          )}
        >
          {features.map((feature, index) => (
            <div className={styles.feature} key={`feature-${index}`}>
              <ImgIcon
                className={styles.icon}
                name={feature.icon}
                alt={feature.description}
              />
              <h4>{feature.description}</h4>
            </div>
          ))}
        </div>
      </div>
    </Container>
  )
}

export default JoinUsFeatures