/**
 * Modal Wrapper - React helpers for vendor modal utilities
 *
 * @vendor-dependency @vendor-web/js/components/modal.js
 * @cleanup-status ⚠️ Vendor does not expose cleanup; rely on modal self-removal after close
 */

import React from 'react';
import {
  peopleModal as vendorPeopleModal,
  openModal,
  closeModal,
} from '@vendor-web/js/components/modal.js';

type PeopleModalData = {
  portrait?: string;
  name?: string;
  title?: string;
  text?: string;
};

type PeopleModalTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  modalData: PeopleModalData;
  as?: React.ElementType;
};

/**
 * Render-prop style trigger that opens the vendor people modal on click.
 * Use when you want React events to drive the vendor modal.
 */
export function PeopleModalTrigger({
  modalData,
  as: Component = 'button',
  onClick,
  children,
  ...rest
}: PeopleModalTriggerProps) {
  return (
    <Component
      {...rest}
      onClick={async (event: React.MouseEvent<HTMLElement>) => {
        onClick?.(event as unknown as React.MouseEvent<HTMLButtonElement>);
        await vendorPeopleModal(modalData);
      }}
    >
      {children}
    </Component>
  );
}

/**
 * Direct helper to open the vendor people modal.
 * Returned promises mirror vendor behavior.
 */
export function peopleModal(data: PeopleModalData) {
  return vendorPeopleModal(data);
}

// Re-export vendor helpers for completeness (keeps imports centralized)
export { openModal, closeModal };

export default PeopleModalTrigger;