import Link from "next/link";
import { Button } from "../components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";

type Button = {
  title: string;
  tooltip: string;
  url: string;
  openInNewTab?: boolean;
};

const buttons: Button[] = [
  { title: "Get Started", tooltip: "Click to get open the player page", url: "/player" },
  {
    title: "Documentation",
    tooltip: "Click to open the documentation",
    url: "https://api.mcutils.xyz/swagger-ui.html",
    openInNewTab: true,
  },
];

export default function Home(): JSX.Element {
  return (
    <div className="text-center flex flex-col justify-center">
      <h1 className="text-4xl mb-2">Minecraft Utilities</h1>
      <div className="text-lg">
        <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>

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