/**
 * Install toggle button — server-action backed via the surrounding `<form>`.
 * Generalised from the .tp-switch toggle on the legacy tools page.
 *
 * The form action must be a Next.js server action that calls
 * `setItemInstalled(id, !installed)`. The action lives outside this component
 * so the toggle stays purely presentational and can be reused everywhere a
 * marketplace item is rendered.
 *
 * Hidden fields `current_kind` and `slug_hint` are echoed back to the server
 * action so the post-redirect toast can identify which item changed and which
 * tab to restore.
 *
 * @param {{
 *   action: any,
 *   itemId: string,
 *   installed: boolean,
 *   available?: boolean,
 *   disabled?: boolean,
 *   label?: string,
 *   slugHint?: string,
 *   currentKind?: string,
 * }} props
 */
export default function InstallToggle({
  action,
  itemId,
  installed,
  available = true,
  disabled = false,
  label,
  slugHint,
  currentKind,
}) {
  const isDisabled = disabled || !available;
  const ariaLabel = label || `${installed ? 'Uninstall' : 'Install'} ${itemId}`;
  return (
    <form action={action} className="mkt-toggle-form">
      <input type="hidden" name="item_id" value={itemId} />
      <input type="hidden" name="installed" value={String(!installed)} />
      {slugHint ? <input type="hidden" name="slug_hint" value={slugHint} /> : null}
      {currentKind ? <input type="hidden" name="current_kind" value={currentKind} /> : null}
      <button
        className={`mkt-toggle ${installed ? 'on' : ''}`}
        type="submit"
        role="switch"
        aria-checked={installed}
        aria-label={ariaLabel}
        disabled={isDisabled}
      />
    </form>
  );
}
