import { Check, Copy } from "lucide-react";
import { useState } from "react";

import { toast } from "@/client/lib/toast";

type Props = {
  value: string;
  copyValue?: string;
  label?: string;
  mono?: boolean;
};

export function Copyable({ value, copyValue, label, mono = true }: Props) {
  const [copied, setCopied] = useState(false);
  const handleCopy = () => {
    void navigator.clipboard.writeText(copyValue ?? value).then(
      () => {
        setCopied(true);
        window.setTimeout(() => setCopied(false), 1400);
        toast.success(`Copied${label ? ` ${label}` : ""}.`);
      },
      () => toast.error(`Could not copy${label ? ` ${label}` : ""}.`),
    );
  };

  return (
    <div className="group relative rounded-xl border border-zinc-700/60 bg-zinc-900/60">
      <div
        className={`min-w-0 break-all px-3 py-2 pr-24 text-sm leading-relaxed text-zinc-200 ${mono ? "font-mono" : ""}`}
      >
        {value}
      </div>
      <button
        type="button"
        onClick={handleCopy}
        aria-label={`Copy${label ? ` ${label}` : ""}`}
        className="absolute top-1.5 right-1.5 inline-flex min-w-[5rem] items-center justify-center gap-1.5 rounded-lg border border-zinc-700/60 bg-zinc-800/90 px-2.5 py-1 text-xs text-zinc-200 transition-colors hover:bg-zinc-700/80"
      >
        {copied ? (
          <>
            <Check className="h-3.5 w-3.5 text-emerald-400" strokeWidth={2.25} aria-hidden="true" />
            Copied
          </>
        ) : (
          <>
            <Copy className="h-3.5 w-3.5" strokeWidth={2} aria-hidden="true" />
            Copy
          </>
        )}
      </button>
    </div>
  );
}