import React from 'react';

declare module 'react' {
  interface ButtonHTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T> {
    variant?: 'primary' | 'secondary' | 'plain' | 'monochromePlain' | string;
  }
}

export interface ShopifyGlobal {
  toast: {
    show: (message: string, options?: { isError?: boolean; duration?: number }) => void;
  };
  modal: {
    show: (id: string) => void;
    hide: (id: string) => void;
  };
  saveBar: {
    show: (id?: string) => void;
    hide: (id?: string) => void;
  };
  idToken: () => Promise<string>;
}

declare global {
  const shopify: ShopifyGlobal | undefined;
  interface Window {
    shopify?: ShopifyGlobal;
  }
  namespace JSX {
    interface IntrinsicElements {
      'ui-nav-menu': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
      'ui-title-bar': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & { title?: string }, HTMLElement>;
      'ui-modal': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & { id?: string }, HTMLElement>;
      'ui-save-bar': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & { id?: string }, HTMLElement>;
      's-app-nav': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
      's-link': React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
    }
  }
}