'use client';

import { useState } from 'react';

export default function OpinionLinkBox({ url }: { url: string }) {
  const [copiado, setCopiado] = useState(false);

  const copiar = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setCopiado(true);
      setTimeout(() => setCopiado(false), 2000);
    } catch {
      setCopiado(false);
    }
  };

  return (
    <div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
      <input
        readOnly
        value={url}
        className="flex-1 px-3 py-2 text-sm text-gray-700 outline-none min-w-0 bg-gray-50"
        onFocus={(e) => e.currentTarget.select()}
      />
      <button
        type="button"
        onClick={copiar}
        className="px-3 py-2 text-sm font-medium bg-black text-white whitespace-nowrap hover:bg-gray-800"
      >
        {copiado ? 'Copiado ✓' : 'Copiar'}
      </button>
    </div>
  );
}
