'use client';

import { useState } from 'react';

export default function CopyLink({ link }: { link: string }) {
  const [copied, setCopied] = useState(false);

  const copy = async () => {
    await navigator.clipboard.writeText(link);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  return (
    <div className="mt-6 flex items-center gap-2">
      <input
        readOnly
        value={link}
        onFocus={(e) => e.target.select()}
        className="w-full border border-line px-3 py-2 font-mono text-xs"
      />
      <button
        onClick={copy}
        className="whitespace-nowrap border border-ink px-4 py-2 text-sm hover:bg-ink hover:text-paper"
      >
        {copied ? 'Copied' : 'Copy link'}
      </button>
    </div>
  );
}