"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { CopyButton } from "@/components/copy-button";
import { TypeToggle } from "@/components/type-toggle";

export function FullpageTool({ origin, apiKey }: { origin: string; apiKey: string }) {
  const t = useTranslations("tools");
  const [type, setType] = useState<"PAID" | "FREE">("PAID");
  const snippet = `<script src="${origin}/api/v1/fullpage" data-key="${apiKey}" data-type="${type}"></script>`;

  return (
    <div className="space-y-4">
      <p className="text-sm text-muted">{t("chooseType")}</p>
      <TypeToggle value={type} onChange={setType} />
      <p className="text-sm text-muted">{type === "FREE" ? t("fullpageFreeHint") : t("fullpagePaidHint")}</p>
      <div className="card space-y-3 p-5">
        <pre className="overflow-x-auto text-sm" dir="ltr">
          {snippet}
        </pre>
        <CopyButton value={snippet} />
      </div>
    </div>
  );
}