import * as React from "react"
import { useStaticQuery, graphql, navigate } from "gatsby"
import { Container, ListLayout, ListImg } from "@/components"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"

const ChosenSolution: React.FC = () => {
  const dataQuery = useStaticQuery<StrapiSelectedSolutionQuery>(graphql`
    query StrapiSelectedSolutionQuery {
      allStrapiSelectedSolution(limit: 4, sort: { fields: order, order: ASC }) {
        nodes {
          solution {
            title
            description
            id
            customUrl
          }
          image {
            alt
            media {
              width
              height
              url
            }
          }
        }
      }
    }
  `)

  const data: StrapiSelectedSolution[] =
    dataQuery.allStrapiSelectedSolution.nodes || []

  return (
    <div className={styles.chosenSolution}>
      <Container>
        <h1>{t("chosen solution")}</h1>
        <ListLayout listData={data}>
          {item => (
            <div
              className={styles.inner}
              onClick={() =>
                navigate(
                  `/solution-detail/${
                    item.solution.customUrl ?? `Solutions_${item.solution.id}`
                  }`
                )
              }
            >
              <ListImg className={styles.imgContent} imgInfo={item.image} />
              <h4>{item?.solution?.title}</h4>
              <p>{item?.solution?.description}</p>
            </div>
          )}
        </ListLayout>
      </Container>
    </div>
  )
}

export default ChosenSolution