import * as React from "react"
import { navigate } from "gatsby"

import { Container, ListImg } from "@/components"
import SwiperContainer from "@/components/swiper"
import * as styles from "./index.module.scss"

interface IProps {
  title: string
  data?: RelatedCard[]
}

const SolutionList: React.FC<IProps> = ({ title, data }) => {
  data = data ?? []
  return (
    <div className={styles.wrapper}>
      <Container>
        <h2>{title}</h2>
        <SwiperContainer
          listData={data}
          colNum={4}
          id="solution-list-in-event-detail"
          // smallSwiper={isSmallDetail}
        >
          {item => (
            <div
              className={styles.inner}
              onClick={() =>
                navigate(
                  `/solution-detail/${
                    item.customUrl ?? `Solutions_${item.id}`
                  }`
                )
              }
            >
              <ListImg className={styles.imgContent} imgInfo={item.image} />
              <h4>{item?.title}</h4>
              <p>{item?.description}</p>
            </div>
          )}
        </SwiperContainer>
      </Container>
    </div>
  )
}

export default SolutionList