import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { buttonVariants } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

export function DownloadCard() {
  return (
    <Card>
      <CardHeader className="pb-0">
        <CardTitle className="text-base">Join the Server</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex flex-col gap-2.5">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
            <a
              href="/download/installer"
              className={cn(buttonVariants({ size: "lg" }), "w-full min-h-[44px]")}
            >
              Windows (.bat)
            </a>
            <a
              href="/download/installer-linux"
              className={cn(buttonVariants({ variant: "outline", size: "lg" }), "w-full min-h-[44px]")}
            >
              Linux (.sh)
            </a>
          </div>
          <a
            href="/download/modpack"
            className={cn(
              buttonVariants({ variant: "secondary", size: "lg" }),
              "w-full min-h-[44px]"
            )}
          >
            Download Mods Only (.zip)
          </a>
        </div>

        <Separator />

        <div>
          <h3 className="text-sm font-semibold mb-2">How to install</h3>
          <ol className="list-decimal pl-5 space-y-1.5 text-muted-foreground text-sm">
            <li>
              Make sure you have{" "}
              <strong className="text-foreground">Minecraft Java Edition</strong>{" "}
              installed
            </li>
            <li>
              Download the{" "}
              <strong className="text-foreground">Installer</strong> for your OS
            </li>
            <li>
              <strong className="text-foreground">Windows:</strong> double-click
              the .bat file.{" "}
              <strong className="text-foreground">Linux:</strong>{" "}
              run <code className="text-xs bg-muted px-1 py-0.5 rounded">bash install-modpack.sh</code>
            </li>
            <li>
              Open Minecraft, select{" "}
              <strong className="text-foreground">Forge 1.20.1</strong>
            </li>
            <li>
              Go to <strong className="text-foreground">Multiplayer</strong> and
              add{" "}
              <strong className="text-foreground">
                minecraft.hurkicorgi.com
              </strong>
            </li>
          </ol>
        </div>
      </CardContent>
    </Card>
  );
}