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

const IndustryInsights: React.FC = () => {
  const data = useStaticQuery<AllHomeSelectedSolutions>(graphql`
    query StrapiHomeSolutionsQuery {
      allStrapiHomeSelectedSolutions(
        limit: 4
        sort: { fields: order, order: ASC }
      ) {
        edges {
          node {
            order
            solution {
              id
              description
              title
              customUrl
            }
            id
          }
        }
      }
      strapiHome {
        Insight {
          media {
            url
            width
            height
          }
        }
      }
    }
  `)

  const solutions = data.allStrapiHomeSelectedSolutions.edges
  const { media, alt } = data.strapiHome.Insight

  return (
    <Container>
      <div className={styles.industry}>
        <div className="columns is-variable">
          <div className="column is-full region-header has-text-left">
            <h4>{HOME_INSIGHT.insight}</h4>
            <h1>{HOME_INSIGHT.title}</h1>
            <h5 className="has-text-weight-normal">{HOME_INSIGHT.subtitle}</h5>
            <div className={styles.more}>
              <LinkModule to={"/insight"}>
                {HOME_INSIGHT.moreInsight}
              </LinkModule>
            </div>

            <div
              className={cls(
                "columns is-variable is-2-mobile is-2-tablet is-4-desktop",
                styles.industryContent
              )}
            >
              <div className={cls("column is-6 pb-4", styles.industryText)}>
                {solutions.map(solution => {
                  return (
                    <div
                      className={styles.industryTitleList}
                      key={solution.node.id}
                    >
                      <div className={styles.blockDecoration} />
                      <div className={cls("pl-5", styles.industryTitle)}>
                        <CustomLink
                          linkTo={`/solution-detail/${
                            solution.node.solution.customUrl ??
                            `Solutions_${solution.node.solution.id}`
                          }`}
                        >
                          <h4>{solution.node.solution.title}</h4>
                        </CustomLink>
                        <p className={styles.p1}>
                          {solution.node.solution.description}
                        </p>
                      </div>
                    </div>
                  )
                })}
              </div>
              <div className="column is-6 pb-4">
                <img
                  className={cls("image", styles.industryImage)}
                  src={media.url}
                  alt={alt}
                />
              </div>
            </div>
            <div className="columns is-variable is-4">
              <div className={cls("column is-full", styles.more)}>
                <LinkModule to={"/solution"}>
                  {HOME_INSIGHT.moreSolution}
                </LinkModule>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Container>
  )
}

export default IndustryInsights