import { ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { ScrollArea } from "~/components/ui/scroll-area";
import { DashboardTableOfContents } from "./toc";
import clsx from "clsx";

export type PreviewComponentProps = {
  title: string;
  description: string;
  variants:
    | {
        id: string;
        title: string;
        component: ReactNode;
        code?: string;
        description?: string;
      }[]
    | {
        id: string;
        title: string;
        iframe: string;
        code?: string;
        description?: string;
      }[];
  className?: string;
  withToc?: boolean;
  overflow?: "hidden" | "visible";
};
export default function PreviewComponent({ title, description, variants, className, withToc = true, overflow = "hidden" }: PreviewComponentProps) {
  const { t } = useTranslation();

  return (
    <main className={clsx("relative pb-6 lg:gap-10 lg:pb-8", withToc && "xl:grid xl:grid-cols-[1fr_150px]")}>
      <div className="space-y-8 overflow-hidden">
        <div>
          <h1 className="scroll-m-20 text-4xl font-bold tracking-tight">{title}</h1>
          <p className="text-muted-foreground mt-1 text-lg">{description}</p>
        </div>
        {variants.map((variant, index) => (
          <div key={index} className="space-y-2">
            <div className="space-y-1">
              <h3 id={variant.id} className="text-xl font-bold tracking-tight">
                {variant.title}
              </h3>
              <p className="text-muted-foreground text-sm">{variant.description}</p>
            </div>
            <div
              className={clsx(
                "border-muted-foreground flex justify-center rounded-lg border-2 border-dashed",
                className,
                overflow === "hidden" ? "overflow-hidden" : "overflow-visible",
                "component" in variant && "p-6"
              )}
            >
              {"iframe" in variant ? <iframe src={variant.iframe} title={title} className="h-96 w-full border-0" /> : variant.component}
            </div>
          </div>
        ))}
      </div>
      {withToc && (
        <div className="hidden text-sm xl:block">
          <div className="sticky top-16 pt-4">
            <ScrollArea className="pb-10">
              <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] py-12">
                <DashboardTableOfContents
                  // title={`${title} - Variants`}
                  title={t("docs.onThisPage")}
                  toc={{
                    items: variants
                      .map((f) => f)
                      .map((item) => ({
                        title: item.title,
                        url: `#${item.id}`,
                      })),
                  }}
                />
              </div>
            </ScrollArea>
          </div>
        </div>
      )}
    </main>
  );
}