"use client";

import { useState } from "react";

export default function PublicLinkCard({
  url,
  qr,
}: {
  url: string;
  qr: string;
}) {
  const [copied, setCopied] = useState(false);

  async function copy() {
    await navigator.clipboard.writeText(url);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }

  return (
    <div className="card p-5">
      <h2 className="mb-3 font-semibold">🔗 Panel público</h2>
      <div className="flex flex-col items-center gap-4 sm:flex-row">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={qr} alt="QR" className="h-32 w-32 rounded-lg ring-1 ring-slate-200" />
        <div className="min-w-0 flex-1">
          <p className="mb-2 text-sm text-slate-500">
            Comparte este enlace o QR con el viajero para acceder a su panel.
          </p>
          <div className="flex items-center gap-2">
            <input readOnly value={url} className="input text-xs" />
            <button onClick={copy} className="btn-primary text-sm whitespace-nowrap">
              {copied ? "¡Copiado!" : "Copiar"}
            </button>
          </div>
          <a href={url} target="_blank" rel="noreferrer" className="mt-2 inline-block text-sm text-blue-600">
            Abrir panel ↗
          </a>
        </div>
      </div>
    </div>
  );
}