'use client'

import Link from "next/link";
import {Col, Row, Tabs} from "antd";

import {TMatter} from "@/app/solution/data";

import styles from './page.module.sass'

export interface IProps {
  items: Record<string, TMatter[]>
  chosenSolutions: (TMatter & any)[]
}

export default function SolutionListMain(props: IProps) {
  const {} = props
  const items = Object.keys(props.items).map((category) => ({
    label: category,
    key: category,
    children: (
      <section className={styles.list}>
        <Row gutter={[32, 24]}>
          {props.items[category].sort((a, b) => (a.order > b.order) ? 1 : -1).map((value) => (
            <Col key={value.url} xs={24} sm={12} md={6}>
              <Link href={value.url} className={styles.item}>
                <div className={styles.item_title}>{value.title}</div>
                <div className={styles.item_summary}>{value.summary}</div>
              </Link>
            </Col>
          ))}
        </Row>
      </section>
    ),
  }))

  return (
    <main className={styles.main}>
      <div className={styles.background}>
        <section className={styles.inner}>
          <h2>精选解决方案</h2>
          <section className={styles.chosen_list}>
            <Row gutter={[32, 24]}>
              {props.chosenSolutions.map((value) => (
                <Col key={value.url} xs={24} sm={12} md={6}>
                  <Link href={value.url} className={styles.chosen_item}>
                    <div className={styles.chosen_item_image}><img src={value.image.src} alt={''} /></div>
                    <div className={styles.chosen_item_title}>{value.title}</div>
                    <div className={styles.chosen_item_summary}>{value.summary}</div>
                  </Link>
                </Col>
              ))}
            </Row>
          </section>
        </section>
      </div>
      <div className={styles.background} style={{background: '#f7f8f9'}}>
        <section className={styles.inner}>
          <h2>全部解决方案</h2>
          <Tabs
            defaultActiveKey={Object.keys(props.items)[0]}
            centered
            items={items}
            size={'large'}
          />
        </section>
      </div>
    </main>
  )
}