"use client";

import { useMemo, useState } from "react";

type WorkShareActionsProps = {
  title: string;
  url: string;
};

export default function WorkShareActions({ title, url }: WorkShareActionsProps) {
  const [status, setStatus] = useState("");

  const shareText = useMemo(
    () => `Mira esto que encontre en Makers3D: ${title}`,
    [title]
  );
  const whatsappHref = `https://wa.me/?text=${encodeURIComponent(`${shareText}\n${url}`)}`;

  async function copyLink() {
    try {
      await navigator.clipboard.writeText(url);
      setStatus("Enlace copiado.");
    } catch {
      setStatus("No se pudo copiar. Manten presionado el enlace.");
    }
  }

  async function shareWork() {
    if (navigator.share) {
      try {
        await navigator.share({
          title,
          text: shareText,
          url
        });
        setStatus("Listo para compartir.");
        return;
      } catch (error) {
        const shareError = error as Error;
        if (shareError.name === "AbortError") {
          return;
        }
      }
    }

    await copyLink();
  }

  return (
    <div className="work-detail-share-actions">
      <button type="button" className="button button-primary" onClick={shareWork}>
        Compartir
      </button>
      <a className="work-detail-share-option" href={whatsappHref} target="_blank" rel="noreferrer">
        WhatsApp
      </a>
      <button type="button" className="work-detail-share-option" onClick={copyLink}>
        Copiar enlace
      </button>
      {status ? <span className="work-detail-share-status">{status}</span> : null}
    </div>
  );
}