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

const BusinessService = () => {
  const queryData = useStaticQuery<AllStrapiBusinessService>(graphql`
    query FetchBusinessServices {
      allStrapiBusinessService(limit: 3, sort: { fields: order, order: ASC }) {
        nodes {
          id
          link
          title
          description
          image {
            alt
            media {
              width
              url
              height
            }
          }
        }
      }
    }
  `)

  const data: StrapiBusinessService[] =
    queryData.allStrapiBusinessService.nodes || []

  return (
    <div className="common-region-grey">
      <Container>
        <h1 className="common-h1-title">{t("business service")}</h1>
        <ListLayout listData={data}>
          {(item: StrapiBusinessService) => (
            <div className={`common-card-content ${styles.inner}`}>
              <ListImg className={styles.imgContent} imgInfo={item.image} />
              <div className={styles.serviceDetail}>
                <h3 className={styles.h3}>{item.title}</h3>
                <p className={styles.p1}>{item.description}</p>
                <CustomLink className={styles.linkBtn} linkTo={item.link}>
                  {t("know more")}
                  <Icon name="arrow-right" />
                </CustomLink>
              </div>
            </div>
          )}
        </ListLayout>
      </Container>
    </div>
  )
}

export default BusinessService