import React from "react"
import { graphql, Link, useStaticQuery } from "gatsby"
import cls from "classnames"
import Container from "@/components/container"
import * as styles from "./index.module.scss"
import LinkModule from "@/components/link-module"

const FeaturedPartner: React.FC<{
  title: string
  description?: string
  moreLinkNode?: React.ReactNode
  clickableLogo: boolean
}> = ({
  title = "精选客户案例",
  description = undefined,
  moreLinkNode = <LinkModule to={"/case"}>查看更多客户案例</LinkModule>,
  clickableLogo = true,
}) => {
  const data = useStaticQuery<StrapiCasesForLogoWallQuery>(graphql`
    query FetchFeaturedPartners {
      allStrapiCasesForLogoWalls(
        limit: 12
        skip: 3
        sort: { fields: order, order: ASC }
      ) {
        edges {
          node {
            customerCase {
              id
              customUrl
              logoWallLogo {
                alt
                media {
                  url
                }
              }
            }
          }
        }
      }
    }
  `)

  const cases = data.allStrapiCasesForLogoWalls.edges.filter(
    item => item.node.customerCase.id !== null
  )

  return (
    <Container className={cls(styles.container)}>
      <h1 className={cls(styles.h1, styles.title)}>{title}</h1>
      {description && (
        <h5 className={cls(styles.h5, styles.description)}>{description}</h5>
      )}
      <div className="columns is-mobile is-variable is-2-mobile is-2-tablet is-4-desktop is-flex-wrap-wrap is-align-items-center">
        {cases.map(({ node }: { node: StrapiCaseForLogoWall }) => (
          <div
            className="column is-2-desktop is-6-mobile is-6-tablet logo-wall-image"
            key={node.customerCase.id}
          >
            {clickableLogo ? (
              <Link
                to={`/case/${
                  node.customerCase.customUrl ??
                  `Customer-cases_${node.customerCase.id}`
                }`}
              >
                <img
                  src={node.customerCase.logoWallLogo.media.url}
                  alt={node.customerCase.logoWallLogo.alt}
                />
              </Link>
            ) : (
              <img
                src={node.customerCase.logoWallLogo.media.url}
                alt={node.customerCase.logoWallLogo.alt}
              />
            )}
          </div>
        ))}
      </div>
      <footer className={styles.more}>{moreLinkNode}</footer>
    </Container>
  )
}

export default FeaturedPartner