import React from "react"
import cls from "classnames"
import * as styles from "./index.module.scss"
import LinkModule from "@/components/link-module"
import Container from "@/components/container"
import { CASE_LIST } from "@/constants/home"

interface CaseListNode {
	id: number
	desc: string
	image: string
	link: string
}

const CaseList: React.FC = () => {
	const renderNode = (node: CaseListNode) => {
		return (
			<div className={cls("column px-4", styles.node)} key={node.id}>
				<div className="card">
					<div className={cls("card-content has-text-left", styles.cardContent)}>
						<figure className={styles.image}>
							<img src={node.image} />
						</figure>
						<p className="content">{node.desc}</p>
						<LinkModule to={node.link} target="_blank">立即前往</LinkModule>
					</div>
				</div>
			</div>
		)
	}


	return (
		<div className={cls("container", styles.caseList)}>
			<h3>在云市场使用 TiDB</h3>
			<Container>
				<div className="columns">
					{CASE_LIST.map(node => renderNode(node))}
				</div>
			</Container>
		</div >
	)
}

export default CaseList