"use client";

import { useState } from "react";

export function CopyField() {
  const value = "npx velynkit add three-tier-pricing";
  const [copied, setCopied] = useState(false);

  function copy() {
    navigator.clipboard?.writeText(value).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }

  return (
    <div className="grid min-h-[200px] place-items-center bg-[#FAFAF8] p-12">
      <div className="w-full max-w-md">
        <label className="mb-2 block font-mono text-[10px] uppercase tracking-[0.16em] text-[#6B6B66]">
          Install command
        </label>
        <div className="flex items-center gap-2 rounded-lg border border-[#1111111A] bg-[#F4F3EF] p-1.5 pl-3">
          <span className="text-[#2A3D2F]">$</span>
          <code className="flex-1 truncate font-mono text-[13px] text-[#111111]">
            {value}
          </code>
          <button
            type="button"
            onClick={copy}
            className={`shrink-0 rounded-md px-3 py-1.5 font-mono text-[11px] uppercase tracking-[0.1em] transition-colors ${
              copied
                ? "bg-[#2A3D2F] text-[#FAFAF8]"
                : "bg-[#111111] text-[#FAFAF8] hover:bg-[#1F1F1D]"
            }`}
          >
            {copied ? "Copied ✓" : "Copy"}
          </button>
        </div>
        <p className="mt-2 font-mono text-[10px] text-[#6B6B66]">
          Writes the component straight into your repo.
        </p>
      </div>
    </div>
  );
}
Copy Field
