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

const AllSolutions = () => {
  const fetchContactUsNowSolutions = () => {
    return useStaticQuery<AllStrapiSolutions>(graphql`
      query fetchContactUsNowSolutions {
        allStrapiSolutions(
          sort: { order: ASC, fields: order }
          filter: { tags: { in: "行业解决方案" } }
          limit: 12
        ) {
          edges {
            node {
              id
              order
              tags
              title
              description
              customUrl
            }
          }
        }
      }
    `)
  }

  const result = fetchContactUsNowSolutions()
  const {
    allStrapiSolutions: { edges = [] },
  } = result

  return (
    <div className={styles.container}>
      <Container>
        <ul className={"columns is-variable is-4 is-multiline is-flex"}>
          {edges.map(({ node }: { node: StrapiSolutions }) => (
            <li
              key={node.id}
              className={"column is-full-mobile is-half-tablet is-one-quarter"}
              //onClick={() =>
              //  navigate(`/solution-detail/${node.customUrl ?? node.id}`)
              //}
              data-tag={node.tags}
            >
              <h4 className={styles.h4}>{node.title}</h4>
              <p className={cls(styles.p1)}>{node.description}</p>
            </li>
          ))}
        </ul>
        <div
          className={cls(
            "is-flex is-justify-content-center",
            styles.moreButton
          )}
        >
          <LinkModule to={`#${contactFormId}`}>咨询解决方案详情</LinkModule>
        </div>
      </Container>
    </div>
  )
}

export default AllSolutions