"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 BookmarkletTool({ origin, locale }: { origin: string; locale: string }) {
  const t = useTranslations("tools");
  const [type, setType] = useState<"PAID" | "FREE">("PAID");
  const path = type === "FREE" ? "dashboard/tools/free" : "dashboard/tools/quick";
  const code = `javascript:(function(){window.open('${origin}/${locale}/${path}?url='+encodeURIComponent(location.href));})();`;

  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("bookmarkletFreeHint") : t("bookmarkletPaidHint")}
      </p>
      <div className="card space-y-3 p-5">
        <a href={code} className="inline-block rounded-full bg-brand px-4 py-2 text-white">
          {t("bookmarkletDrag")}
        </a>
        <div className="flex items-center justify-between gap-2 rounded-xl bg-background px-3 py-2 text-sm">
          <span className="truncate" dir="ltr">
            {code}
          </span>
          <CopyButton value={code} />
        </div>
      </div>
    </div>
  );
}