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

const HomeTechnologyAndInnovations: React.FC = () => {
  const data = useStaticQuery<HomeTechnologyAndInnovationsQueryQuery>(graphql`
    query HomeTechnologyAndInnovationsQuery {
      allStrapiHomeTechnologyAndInnovation(
        sort: { fields: order, order: ASC }
      ) {
        nodes {
          id
          image {
            alt
            media {
              url
              width
              height
            }
          }
          order
          title
          description
          link
        }
      }
    }
  `)

  const nodes: StrapiHomeTechnologyAndInnovation[] =
    data.allStrapiHomeTechnologyAndInnovation.nodes || []

  const getListContent = (list: StrapiHomeTechnologyAndInnovation) => {
    if (list.link) {
      return (
        <CustomLink
          className={`common-card-content card-animate-up ${styles.inner}`}
          linkTo={list.link}
        >
          {cardContent(list)}
        </CustomLink>
      )
    } else {
      return (
        <div className={`common-card-content ${styles.inner}`}>
          {cardContent(list)}
        </div>
      )
    }
  }

  const cardContent = (list: StrapiHomeTechnologyAndInnovation) => {
    return (
      <>
        <ListImg
          className={styles.imgContent}
          imgInfo={list.image}
          scale={[416, 160]}
        />
        <div className={styles.innerContent}>
          <h3>{list.title}</h3>
          <h5>{list.description}</h5>
        </div>
      </>
    )
  }

  return (
    <section
      className={`common-region-grey ${styles.homeTechnologyAndInnovations}`}
    >
      <Container>
        <div className={styles.title}>
          <h4>科技与创新</h4>
          <h1>我们专注于前沿科研，致力于持续的开放式创新</h1>
          <h5 className={styles.h5}>
            PingCAP 在科技研究与技术创新上有着不懈的坚持，
            我们坚信将科技力量和创新实践深入融合能孕育出更多的未来机遇。
          </h5>
        </div>
        <ListLayout listData={nodes}>{item => getListContent(item)}</ListLayout>
      </Container>
    </section>
  )
}

export default HomeTechnologyAndInnovations