import { Card, Button, Row, Col, Carousel } from 'antd'
import { Link } from 'react-router'
import { Database, SearchCheck, Filter, Bolt, Cone, ChartArea, Wallpaper } from 'lucide-react'
import '../styles.scss'

type CardItem = {
  icon: React.ReactNode
  title: string
  description: string
  path: string
  span?: number
}

export default function DataDashboard() {
  const items: CardItem[] = [
    {
      icon: <Database size={40} />,
      title: '数据采集',
      description: '多源数据采集与结构化导入',
      path: '/data/write',
    },
    {
      icon: <SearchCheck size={40} />,
      title: '数据理解与探索',
      description: '动态化数据理解与深度模式探索',
      path: '/data/read',
    },
    {
      icon: <Filter size={40} />,
      title: '数据预处理',
      description: '智能化数据预处理范式',
      path: '/data/preprocess',
    },
    {
      icon: <Bolt size={40} />,
      title: '数据加工',
      description: '‌多模态数据加工架构',
      path: '/data/process',
    },
    {
      span: 8,
      icon: <Cone size={40} />,
      title: '数据挖掘',
      description: '智能数据解析与知识图谱构建‌‌',
      path: '/data/digging',
    },
    {
      span: 8,
      icon: <ChartArea size={40} />,
      title: '可视化组件',
      description: '‌智能可视化组件',
      path: '/data/chart',
    },
    {
      span: 8,
      icon: <Wallpaper size={40} />,
      title: '可视化大屏',
      description: '‌智能可视化大屏',
      path: '/data/screen',
    },
  ]

  const CardCardItem = (item: CardItem) => {
    return (
      <Card>
        <div className="card-item">
          <h3>
            {item.title} {item.icon}
          </h3>
          <p>{item.description}</p>
          <Link to={item.path}>
            <Button shape="round">点击进入</Button>
          </Link>
        </div>
      </Card>
    )
  }

  return (
    <div className="dashboard">
      <Carousel className="carousel-banner">
        <div className="banner">
          <img src="/images/banner_1.png" />
        </div>
        <div className="banner">
          <img src="/images/banner_2.png" />
        </div>
      </Carousel>
      <Row gutter={[20, 40]}>
        {items.map((item) => (
          <Col span={item.span || 6} key={item.path}>
            {CardCardItem(item)}
          </Col>
        ))}
      </Row>
    </div>
  )
}
