"use client";
import { getCustomization } from "@/lib/api";
import { useEffect, useState } from "react";
import { Card, CardDescription, CardHeader, CardTitle } from "./ui/card";
import Markdown from "react-markdown";
import { useTheme } from "next-themes";

export default function AfterServerView({ server }: { server: string }) {
  const [description, setDescription] = useState("");
  const [discord, setDiscord] = useState("");
  const { resolvedTheme } = useTheme();

  useEffect(() => {
    getCustomization(server).then((b) => {
      if (b != null) {
        setDescription(b.description == null ? "" : b.description);
        setDiscord(b.discord == null ? "" : b.discord);
      }
    });
  }, []);

  return (
    <div className="grid sm:grid-cols-4 pl-4 pr-4 gap-3.5">
      {description != "" && (
        <Card className="sm:col-span-3">
          <CardDescription className="p-4 prose dark:prose-invert">
            <Markdown disallowedElements={["img"]}>{description}</Markdown>
          </CardDescription>
        </Card>
      )}
      {discord != "" && (
        <Card>
          <CardHeader>
            <CardTitle>Discord Server</CardTitle>
            <CardDescription className="p-4 prose dark:prose-invert">
              <iframe
                src={`https://discord.com/widget?id=${discord}&theme=${resolvedTheme}`}
                height="500"
                allowTransparency={true}
                className="rounded-lg lg:w-[350px]"
                sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
              />
            </CardDescription>
          </CardHeader>
        </Card>
      )}

      <br />
    </div>
  );
}