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

const AllJointSolutions: React.FC = () => {
  const data = useStaticQuery<StrapiJointSolutionQuery>(graphql`
    query FetchJointSolutionQuery {
      allStrapiJointSolution(sort: { fields: order, order: ASC }) {
        nodes {
          id
          title
          customUrl
          jointCompanyLogo {
            alt
            media {
              url
            }
          }
        }
      }
    }
  `)

  const jointSolutionNodes = data.allStrapiJointSolution.nodes || []

  return (
    <section className={cls("common-region-grey", styles.allJointSolutions)}>
      <Container>
        <div className="columns is-flex-wrap-wrap">
          {jointSolutionNodes.map(node => (
            <JoinSolutionCard key={node.id} node={node} />
          ))}
        </div>
      </Container>
    </section>
  )
}

export default AllJointSolutions