Compartir.

<nav class="ui-sample ui-actions ui-share-actions" aria-label="Compartir"><a class="btn btn--secondary" href="mailto:?subject=Serie%20COCHID"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 5h18v14H3zM3 6l9 7 9-7"></path></svg><span>Correo</span></a><a class="btn btn--secondary" href="#copiar-enlace"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M9 15l6-6M7 17H5a4 4 0 010-8h4M17 7h2a4 4 0 010 8h-4"></path></svg><span>Copiar enlace</span></a><a class="btn btn--secondary" href="#insertar"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16"></path></svg><span>Insertar</span></a></nav>

<nav class="ui-sample ui-actions ui-share-actions border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" aria-label="Compartir"><a class="btn btn--secondary underline underline-offset-4" href="mailto:?subject=Serie%20COCHID"><svg class="ui-action-icon h-auto w-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 5h18v14H3zM3 6l9 7 9-7"></path></svg><span>Correo</span></a><a class="btn btn--secondary underline underline-offset-4" href="#copiar-enlace"><svg class="ui-action-icon h-auto w-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M9 15l6-6M7 17H5a4 4 0 010-8h4M17 7h2a4 4 0 010 8h-4"></path></svg><span>Copiar enlace</span></a><a class="btn btn--secondary underline underline-offset-4" href="#insertar"><svg class="ui-action-icon h-auto w-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16"></path></svg><span>Insertar</span></a></nav>

import type { MouseEventHandler } from "react";

/** Icono de una acción de compartir: correo, copiar enlace o insertar. */
export type ShareActionsIcon = "mail" | "link" | "embed";

export interface ShareActionsItem {
  label: string;
  /** Destino del enlace: `mailto:`, un ancla o una URL. */
  href: string;
  /** Icono antes del texto; sin él, el enlace lleva sólo el texto. */
  icon?: ShareActionsIcon;
  onClick?: MouseEventHandler<HTMLAnchorElement>;
}

export interface ShareActionsProps {
  /** Nombre accesible del grupo (`aria-label` del `<nav>`). */
  label?: string;
  items?: ShareActionsItem[];
  /** Mensaje de la región `role="status"`, como «Enlace copiado». Pasa `""` mientras no hay mensaje para que la región exista antes del anuncio; sin la prop, no se emite. */
  status?: string;
  className?: string;
}

const ICONOS: Record<ShareActionsIcon, string> = {
  mail: "M3 5h18v14H3zM3 6l9 7 9-7",
  link: "M9 15l6-6M7 17H5a4 4 0 010-8h4M17 7h2a4 4 0 010 8h-4",
  embed: "M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16",
};

const ITEMS: ShareActionsItem[] = [
  { label: "Correo", href: "mailto:?subject=Serie%20COCHID", icon: "mail" },
  { label: "Copiar enlace", href: "#copiar-enlace", icon: "link" },
  { label: "Insertar", href: "#insertar", icon: "embed" },
];

/**
 * Grupo de enlaces para compartir una página o un recurso por correo, enlace copiado o código para insertar.
 *
 * Cada acción es un `<a>` y funciona sin JavaScript; `status` confirma una acción que corre en el navegador, como copiar el enlace.
 *
 * @example <ShareActions items={[{ label: "Correo", href: "mailto:?subject=Serie%20COCHID", icon: "mail" }]} />
 * @example <ShareActions status="Enlace copiado" />
 */
export function ShareActions({ label = "Compartir", items = ITEMS, status, className }: ShareActionsProps) {
  if (!items.length && status === undefined) return null;
  return (
    <nav className={["ui-actions ui-share-actions", className].filter(Boolean).join(" ")} aria-label={label}>
      {items.map((item, i) => (
        <a className="btn btn--secondary" href={item.href} onClick={item.onClick} key={`${item.href}-${i}`}>
          {item.icon ? (
            <svg className="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><path d={ICONOS[item.icon]}></path></svg>
          ) : null}
          <span>{item.label}</span>
        </a>
      ))}
      {status !== undefined ? <span role="status">{status}</span> : null}
    </nav>
  );
}