import cls from "classnames"
import * as styles from "./index.module.scss"
import React from "react"
import LinkModule from "@/components/link-module"
import t from "@/constants/wording"
import { CustomLink } from "@/components"
import Icon from "@/components/icon"

interface IProps {
  cardInfo: Partner
  defaultLogo: Image
  attrs?: { [key: string]: string | boolean | { [key: string]: string } }
}

export const CardItem: React.FC<IProps> = ({
  cardInfo,
  defaultLogo,
  attrs,
}) => {
  return (
    <div
      className={cls(
        "column is-12-mobile is-6-tablet is-3-desktop",
        styles.partnerItem
      )}
    >
      <div
        className={cls(
          styles.partnerCard,
          !cardInfo.link && !cardInfo.jointSolution && styles.emptyLink,
          cardInfo.link && cardInfo.jointSolution && styles.fullLink
        )}
        {...attrs}
      >
        <div className={styles.image}>
          {cardInfo.link ? (
            <CustomLink linkTo={cardInfo.link}>
              <img
                src={
                  cardInfo.logo
                    ? cardInfo.logo.media.url
                    : defaultLogo.media.url
                }
                alt={cardInfo.logo ? cardInfo.logo.alt : defaultLogo.alt}
              />
            </CustomLink>
          ) : (
            <img
              src={
                cardInfo.logo ? cardInfo.logo.media.url : defaultLogo.media.url
              }
              alt={cardInfo.logo ? cardInfo.logo.alt : defaultLogo.alt}
            />
          )}
        </div>
        <h4>{cardInfo.name}</h4>
        <p>{cardInfo.description}</p>

        <div className={styles.link}>
          {cardInfo.jointSolution && cardInfo.jointSolution.id !== null && (
            <LinkModule
              to={`/joint-solution-detail/${
                cardInfo.jointSolution.customUrl ??
                `Joint-solution_${cardInfo.jointSolution.id}`
              }`}
            >
              {t("view joint solutions")}
            </LinkModule>
          )}
          {cardInfo.link && (
            <div className="pt-2">
              <CustomLink linkTo={cardInfo.link} className={styles.partnerLink}>
                {t("know more")}
                <Icon name="arrow-right" />
              </CustomLink>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default CardItem