"use client";

import ContentCard from "@/components/ContentCard";
import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import dayjs from "dayjs";
import Link from "next/link";
import { useEffect } from "react";

type ReleaseListProps = {
  releases: any;
};
export default function ReleaseList({ releases }: ReleaseListProps) {
  const { dict } = useGlobal();

  const { setHeader } = useApp();

  useEffect(() => {
    setHeader({
      title: {
        link: "/dashboard",
        text: dict.pages.general.navigation.dashboard,
        path: [
          { link: "releases", text: dict.pages.general.navigation.versions },
        ],
      },
    });
  }, []);

  return (
    <>
      <ContentCard className="h-full space-y-2">
        <div>
          <p className="text-3xl font-bold">Releases</p>
          <hr />
        </div>
        <div className="space-y-2">
          {!releases.operation ? (
            <>
              <p>There{"'"}s Nothing to show</p>
            </>
          ) : (
            releases.data.map(
              (e: { name: string; time: number; size: number }, i: number) => {
                if (e.name === "template.md") return null;

                return (
                  <div className="flex justify-between" key={i}>
                    <p>
                      <Link
                        href={`/dashboard/releases/${e.name}`}
                        className="text-xl font-bold text-blue-500 hover:underline"
                      >
                        {e.name}
                      </Link>
                    </p>
                    <p>
                      {dayjs(e.time)
                        .toDate()
                        .toLocaleDateString(undefined, { dateStyle: "full" })}
                    </p>
                  </div>
                );
              },
            )
          )}
        </div>
      </ContentCard>
    </>
  );
}