'use client'

import styles from './page.module.sass'
import Image from "next/image";
import Link from "next/link";
import {Col, Row} from "antd";
import {tags} from "@/app/practice/data";
import {useState} from "react";
import clsx from "clsx";

export interface IProps {
  items: {title: string, date: Date, summary: string, slug: string, logo: string, customer: string, tags: string[]}[]
  tags: typeof tags
}

export default function PracticeListMain(props: IProps) {
  const {items, tags} = props
  const [category, setCategory] = useState(tags[0])
  return (
    <main>
      <section className={styles.filter}>
        {tags.map((value) => (
          <div key={value.category} className={clsx(styles.filter_item, {[styles.filter_item_selected]: value.category === category.category})} onClick={() => setCategory(value)}>
            <div className={styles.filter_item_icon}>
              <Image src={value.category === category.category ? value.iconActive : value.icon} width={16} height={16} alt={value.category} />
            </div>
            <div className={styles.filter_item_label}>{value.category}</div>
          </div>
        ))}
      </section>
      <section className={styles.list}>
        <Row gutter={[48, 32]}>
          {items.filter((value) => category.children.map(({url}) => url).includes(value.slug)).sort((a, b) => a.date < b.date ? 1 : -1).map((value) => (
            <Col key={value.slug} xs={24} sm={12} md={8}>
              <Link href={`/practice/${value.slug}`} className={styles.item}>
                <div className={styles.item_logo}>
                  <img src={value.logo.replace('/images/blog-cn', '')} alt={value.customer} />
                </div>
                <div className={styles.item_summary}>{value.title}</div>
              </Link>
            </Col>
          ))}
        </Row>
      </section>
    </main>
  )
}