import { Stats } from "@/app/components/stats";
import Link from "next/link";
import { ReactElement } from "react";
import { Button } from "../components/ui/button";
import { Separator } from "../components/ui/separator";
import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
import { Title } from "@/app/components/title";

type Button = {
  /**
   * The title of the button.
   */
  title: string;

  /**
   * The tooltip to display for this statistic.
   */
  tooltip: string;

  /**
   * The URL to go to.
   */
  url: string;

  /**
   * Whether clicking the button will
   * open the link in a new tab.
   */
  openInNewTab?: boolean;

  /**
   * The class name to apply to the button.
   */
  className?: string;
};

const buttons: Button[] = [
  {
    title: "Get Started",
    tooltip: "Click to get started with the API",
    url: "/documentation",
    className: "bg-gradient-to-r from-indigo-500 to-emerald-500 px-7 hover:opacity-75 transition-all transform-gpu",
  },
];

export default function Home(): ReactElement {
  return (
    <div className="text-center flex flex-col gap-4">
      <div className="p-2">
        <Title
          title="Minecraft Utilities"
          subtitle={
            <>
              <p>
                Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.
              </p>
              <p>We offer you a simple and easy to use API.</p>
            </>
          }
        />

        <div className="flex flex-row gap-2 justify-center mt-4 flex-wrap">
          {buttons.map((button, index) => {
            return (
              <Tooltip key={index}>
                <TooltipTrigger asChild>
                  <Button key={index} className={button.className ? button.className : ""}>
                    <Link href={button.url} target={button.openInNewTab ? "_blank" : ""}>
                      <p>{button.title}</p>
                    </Link>
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>{button.tooltip}</p>
                </TooltipContent>
              </Tooltip>
            );
          })}
        </div>
      </div>

      <Separator />

      <div className="flex flex-col gap-4 items-center p-2">
        <div className="text-center">
          <p className="font-semibold text-xl">API Statistics</p>
          <p>View the statistics for the API in real-time!</p>
        </div>
        <Stats />
      </div>
    </div>
  );
}