"use client";

import { CheckIcon, LinkIcon } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";

/**
 * The one interactive subscribe option: copies the iCal URL for apps that
 * want it pasted (Outlook and friends). Takes the shared card classes from the
 * page so the three options stay identical.
 */
export function CopyLinkCard({ url, className }: { url: string; className: string }) {
  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setState("copied");
    } catch {
      // No clipboard access (older browser, insecure context): show the URL instead of failing silently.
      setState("failed");
    }
    setTimeout(() => setState("idle"), 2500);
  };

  return (
    <button type="button" onClick={copy} className={className} aria-live="polite">
      <span
        className={cn(
          "flex size-10 shrink-0 items-center justify-center rounded-lg transition-colors",
          state === "copied" ? "bg-emerald-50 text-emerald-600" : "bg-primary/10 text-primary",
        )}
      >
        {state === "copied" ? <CheckIcon aria-hidden className="size-5" /> : <LinkIcon aria-hidden className="size-5" />}
      </span>
      <span className="flex min-w-0 flex-col gap-0.5">
        <span className="font-medium">{state === "copied" ? "Link kopiert" : "iCal-Link kopieren"}</span>
        {/* break-all only for the URL (it has no spaces to wrap at); on words it splits mid-word. */}
        <span className={cn("text-sm text-muted-foreground", state === "failed" && "break-all")}>
          {state === "failed" ? url : "Outlook und andere Apps"}
        </span>
      </span>
    </button>
  );
}