import React from "react"
import cls from "classnames"
import LinkModule from "../link-module"
import * as styles from "./index.module.scss"
import Container from "@/components/container"

interface IProps {
  data: {
    title: string
    description: string
    link: {
      label: string
      value: string
    }
  }[]
  className?: string
}

const LearnMoreSection: React.FC<IProps> = ({ data, className }) => {
  return (
    <section className={cls(styles.learnMoreContainer, className)}>
      <Container>
        <div className="columns is-variable is-4-desktop is-2-tablet">
          {data.map((item, index) => (
            <div
              className={cls("column", data.length === 1 ? " is-10" : " is-6")}
              key={`section-${index}`}
            >
              <h2>{item.title}</h2>
              <h5>{item.description}</h5>
              <LinkModule to={item.link.value}>{item.link.label}</LinkModule>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}

export default LearnMoreSection