/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
"use client";
import { type JSX, useEffect, useState } from "react";
import { Activity } from "../../components/activity";
import { Rule } from "../../components/rule";

/**
 * Renders the /activity page.
 * @returns A React Component.
 */
const ActivityComponent = (): JSX.Element => {
  const [ activity, setActivity ] = useState<
    Array<{
      type:     string;
      date:     Date;
      repo:     string;
      repoName: string;
    }>
  >([]);

  useEffect(() => {
    void fetch("/api/activity").
      then(async(data) => {
        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
        return (await data.json()) as Array<{
          type:     string;
          date:     Date;
          repo:     string;
          repoName: string;
        }>;
      }).
      then((data) => {
        setActivity(data);
      });
  }, []);

  return (
    <main className="w-[95%] text-center
      max-w-4xl m-auto mt-16 mb-16 rounded-lg">
      <h1 className="text-5xl">{`Recent Activity`}</h1>
      <section>
        <p className="mb-2">{`See what Naomi has been up to lately.`}</p>
        <Rule />
        <ol className="relative border-s border-[--primary] w-4/5 m-auto">
          {activity.map((act, index) => {
            return (
              <Activity
                date={act.date}
                heart={index % 2 === 1
                  ? "🩷"
                  : "🩵"}
                key={act.date.toString()}
                repo={act.repo}
                repoName={act.repoName}
                type={act.type}
              />
            );
          })}
        </ol>
      </section>
    </main>
  );
};

export default ActivityComponent;