import React from "react";

import { Link } from "@/components/Link";
import {
  ShapesConfig,
  GetShapesConfig,
  defaultGetShapesConfig,
} from "@/components/ShapesBackground";

import styles from "./ArchivePage.module.css";

export interface Props {
  type: "news" | "events";
  items: {
    year: string;
    terms: string[];
  }[];
}

export function ArchivePage({ items, type }: Props) {
  return (
    <div className={styles.page}>
      <h1>{capitalize(type)} Archive</h1>
      <ul className={styles.list}>
        {items.map(({ year, terms }) =>
          terms.map((term) => (
            <li key={`/${type}/${year}/${term}`}>
              <Link href={`/${type}/${year}/${term}`}>
                {capitalize(term)} {year}
              </Link>
            </li>
          ))
        )}
      </ul>
    </div>
  );
}

ArchivePage.getShapesConfig = ((width, height) => {
  return window.innerWidth <= 768
    ? ({} as ShapesConfig)
    : defaultGetShapesConfig(width, height);
}) as GetShapesConfig;

function capitalize(str: string) {
  return str.slice(0, 1).toUpperCase() + str.slice(1);
}