import React from "react"
import cls from "classnames"

import { CustomLink, Icon } from "@/components"

import * as styles from "./index.module.scss"
import Container from "@/components/container"
import t from "@/constants/wording"
import { PARTNER_RIGHTS_RESOURCE } from "@/constants/partner"

interface IProps {
  partnerTypesList: PartnerType[]
}

export const PartnerGroup: React.FC<IProps> = ({ partnerTypesList }) => {
  const title = t("partner's rights")
  return (
    <section className={cls(styles.section)}>
      <Container className={cls(styles.container)}>
        <article className="columns is-4-tablet is-variable is-tablet is-multiline">
          {partnerTypesList.map(({ id, name, description, link }) => {
            return (
              <div
                className={cls(
                  "column is-half-tablet is-one-third-widescreen"
                )}
                key={id}
              >
                <CustomLink linkTo={link}>
                  <div
                    className={cls(
                      styles.cardArea,
                      "px-5 is-flex is-flex-direction-column card-animate-up"
                    )}
                  >
                    <h4 className="has-text-left pb-4">{name}</h4>
                    <div className={styles.descContainer}>
                      <p>{description}</p>
                      <div className={cls(styles.linkContainer)}>
                        {t("to know more")}
                        <Icon name="arrow-right" />
                      </div>
                    </div>
                  </div>
                </CustomLink>
              </div>
            )
          })}
        </article>
        <h1>{title}</h1>
        <article className="className">
          <div
            className={cls(
              "columns is-mobile is-4 is-variable is-multiline",
              styles.partnerRightArea
            )}
          >
            {PARTNER_RIGHTS_RESOURCE.map(part => {
              return (
                <div
                  className="column is-3-tablet is-half-mobile"
                  key={part.name}
                >
                  <div className={cls("has-text-centered")}>
                    <img src={part.img} alt={t(part.name)} />
                    <h3>{t(part.name)}</h3>
                    <h5>{t(part.description)}</h5>
                  </div>
                </div>
              )
            })}
          </div>
        </article>
      </Container>
    </section>
  )
}