import React from "react"
import cls from "classnames"

import { Container, LinkModule } from "@/components"
import SwiperContainer from "@/components/swiper"
import t from "@/constants/wording"
import PracticeCard from "../practice-card"

import * as styles from "./index.module.scss"

// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = function () {}

function BestPracticeRelatedCard(props: { list: PracticeType[] }) {
  const { list = [] } = props
  const filterList = list.filter(item => item.id !== null)
  return filterList.length > 0 ? (
    <section className={cls(styles.container)}>
      <Container>
        <h2>{t("best practice related")}</h2>
      </Container>
      <SwiperContainer listData={filterList}>
        {item => (
          <PracticeCard
            {...{
              ...item,
              id: `Best-practices_${item.id}`,
              select: noop,
              withDivideLine: false,
              parentStyles: styles,
            }}
          />
        )}
      </SwiperContainer>
      <Container className={styles.linkWrapper}>
        <LinkModule to="/practice">
          {t("go to all best practice")}
        </LinkModule>
      </Container>
    </section>
  ) : (
    <React.Fragment />
  )
}

export default BestPracticeRelatedCard