"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 ApiTool({ origin, apiKey }: { origin: string; apiKey: string }) {
  const t = useTranslations("tools");
  const [type, setType] = useState<"PAID" | "FREE">("PAID");
  const example = `curl -X POST ${origin}/api/v1/shorten \\
  -H "Authorization: Bearer ${apiKey}" \\
  -H "Content-Type: application/json" \\
  -d "{\\"url\\":\\"https://example.com\\",\\"type\\":\\"${type}\\"}"`;

  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("apiFreeHint") : t("apiPaidHint")}</p>
      <pre className="card overflow-x-auto p-5 text-sm" dir="ltr">
        {example}
      </pre>
      <CopyButton value={example} />
      <p className="text-sm text-muted">{t("apiTypes")}</p>
    </div>
  );
}