import * as fs from 'fs';
import matter from 'gray-matter';
import NextLink from 'next/link';
import NextImage from 'next/image';
import clsx from 'clsx';

import { Banner } from '@/components/Banner/Banner';

import styles from './page.module.scss';

const pathname = './src/app/joint-solution/[slug]/markdown';

const title = '联合解决方案';

export default function JointSolutionListPage() {
  const filenames = fs
    .readdirSync(pathname)
    .filter((name) => name.endsWith('.md'));
  const items: {
    title: string;
    logo: string;
    slug: string;
    url: string;
  }[] = [];
  for (const filename of filenames) {
    const filepath = pathname + '/' + filename;
    try {
      const source = fs.readFileSync(filepath).toString();
      const { data, content } = matter(source);
      const meta = data as {
        title: string;
        logo: string;
        slug: string;
        url: string;
      };
      if (!(meta.title == null)) {
        items.push({ ...meta, slug: filename.replaceAll('.md', '') });
      }
    } catch (e) {
      console.error(e, { filename });
    }
  }
  return (
    <div className={styles.container}>
      <section className={styles.banner}>
        <Banner title={title} />
      </section>
      <main>
        <section className="section">
          <div className={clsx(styles.layout, 'contain')}>
            {items.map(({ title, url, slug, logo }) => (
              <NextLink href={url} className={styles.card} key={slug}>
                <NextImage
                  src={logo}
                  alt=""
                  height={40}
                  width={120}
                  className={styles.logo}
                />
                <h4>{title}</h4>
              </NextLink>
            ))}
          </div>
        </section>
      </main>
    </div>
  );
}