import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"
import * as styles from "./index.module.scss"
import t from "@/constants/wording"
import { Container, LinkModule } from "@/components"
import JoinSolutionCard from "@/components/joint-solution/card"

interface IProps {
  sectionName?: string
  title: string
}

const JointSolution: React.FC<IProps> = ({ sectionName, title }) => {
  const data = useStaticQuery<StrapiJointSolutionQuery>(graphql`
    query StrapiJointSolutionQuery {
      allStrapiJointSolution(limit: 3, sort: { fields: order, order: ASC }) {
        nodes {
          id
          title
          customUrl
          jointCompanyLogo {
            alt
            media {
              url
            }
          }
          id
        }
      }
      strapiHome {
        TiDBLogo {
          media {
            url
          }
        }
      }
    }
  `)

  const jointList = data.allStrapiJointSolution.nodes || []
  const logo = data.strapiHome

  return (
    <div className="common-region-grey">
      <Container>
        <div className={`region-header ${styles.regionHeader}`}>
          {sectionName && <h4>{sectionName}</h4>}
          <h1>{title}</h1>
        </div>
        <div className={styles.jointContent}>
          {jointList.map(node => (
            <JoinSolutionCard
              key={node.id}
              TiDBLogo={logo?.TiDBLogo}
              node={node}
            />
          ))}
        </div>
        <div className={styles.more}>
          <LinkModule to={"/joint-solution"}>
            {t("look more joint solution")}
          </LinkModule>
        </div>
      </Container>
    </div>
  )
}

export default JointSolution