/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
"use client";
import type { JSX } from "react";

/**
 * Renders the /contribute page.
 * @returns A React Component.
 */
const ContributeComponent = (): JSX.Element => {
  return (
    <main className="w-[95%] text-center
        max-w-4xl m-auto mt-16 mb-16 rounded-lg">
      <h1 className="text-5xl">{`Open for Contribution~!`}</h1>
      <section>
        <p className="mb-2">{`Our issue tracker is currently unavailable while we work with the Codeberg team to address rate limit issues.`}</p>
      </section>
    </main>
  );

  /*
   *To be restored when rate-limit is lifted.
   *const [ issues, setIssues ] = useState<
   *Array<{
   *  labels: Array<string>;
   *  number: number;
   *  title:  string;
   *  url:    string;
   *  body:   string;
   *}>
   *>([]);
   *
   *useEffect(() => {
   *void fetch("/api/contribute").
   *  then(async(data) => {
   *    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   *    return (await data.json()) as Array<{
   *      labels: Array<string>;
   *      number: number;
   *      title:  string;
   *      url:    string;
   *      body:   string;
   *    }>;
   *  }).
   *  then((data) => {
   *    setIssues(data);
   *  });
   *}, []);
   *
   *if (issues.length === 0) {
   *return (
   *  <main className="w-[95%] text-center
   *    max-w-4xl m-auto mt-16 mb-16 rounded-lg">
   *    <h1 className="text-5xl">{`Open for Contribution~!`}</h1>
   *    <section>
   *      <p className="text-3xl">{`Loading...`}</p>
   *    </section>
   *  </main>
   *);
   *}
   *
   *return (
   *  <main className="w-[95%] text-center
   *    max-w-4xl m-auto mt-16 mb-16 rounded-lg">
   *    <h1 className="text-5xl">{`Open for Contribution~!`}</h1>
   *    <section>
   *      <p className="mb-2">{`Heya! This page lists issues across all of our projects that are currently open for contribution.
   *      We'd love to have you work on one!`}</p>
   *      <Rule />
   *      <ol className="relative border-s border-[--primary] w-4/5 m-auto">
   *        {issues.map((act) => {
   *          return (
   *            <Issue key={act.url} {...act} />
   *          );
   *        })}
   *      </ol>
   *    </section>
   *  </main>
   *);
   */
};

export default ContributeComponent;