import * as React from "react"
import cls from "classnames"

import { Container } from "@/components"
import * as styles from "./index.module.scss"
import HoverDescriptionCard from "@/components/hover-description-card"
import SwiperContainer from "@/components/swiper"

interface IProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  data?: RelatedCard[]
}

const CaseList: React.FC<IProps> = ({ className, title, data, ...props }) => {
  data = data ?? []
  return (
    <div className={cls(styles.wrapper, className)} {...props}>
      <Container>
        <h2>{title}</h2>
        <div className={styles.cards}>
          <SwiperContainer listData={data} id="case-list-in-event-detail">
            {item => (
              <HoverDescriptionCard
                {...item}
                to={`/case/${item.customUrl ?? item.id}`}
              />
            )}
          </SwiperContainer>
        </div>
      </Container>
    </div>
  )
}

export default CaseList