export type CustomIonButtonWrapper = {
  children: StringOrElementOrNumber | StringOrElementOrNumber[];
  onClick?:
    | ((event: React.FormEvent) => void)
    | (() => Promise<void>)
    | (() => void);
  routerLink?: string;
  id?: string;
  color?: 'danger' | 'tertiary' | 'warning' | 'success';
  type?: 'submit';
  href?: string;
  className?: string;
  fill?: 'outline';
  disabled?: boolean;
  role?: 'button' | 'link';
};

const ButtonStandard: React.FC<CustomIonButtonWrapper> = (
  props: IonicButtonWrapper,
) => {
  const { children, ...otherProps } = props;
  return (
    <IonButton size="small" {...otherProps}>
      {children}
    </IonButton>
  );
};

<script lang="ts">
	export let onClick:
		| ((event: MouseEvent) => void)
		| (() => Promise<void>)
		| (() => void)
		| undefined = undefined;
	export let id: string | undefined = undefined;
	export let color: 'danger' | 'tertiary' | 'warning' | 'success' | undefined = undefined;
	export let type: 'submit' | undefined = undefined;
	export let href: string | undefined = undefined;
	export let className: string | undefined = undefined;
	export let fill: 'outline' | undefined = undefined;
	export let role: 'button' | 'link' | undefined = undefined;
	export let disabled: boolean = false;
</script>

{#if id}
	<ion-button
		size="small"
		on:click={onClick}
		{id}
		{color}
		{type}
		{href}
		class={className}
		{fill}
		{role}
		{disabled}
	>
		<slot />
	</ion-button>
{:else}
	<!-- 
    If id is set to undefined, then Svelte sets id to the string "undefined".
    So if id has not been set, then do not set id (to avoid setting it to the string "undefined").
   -->
	<ion-button
		size="small"
		on:click={onClick}
		{color}
		{type}
		{href}
		class={className}
		{fill}
		{role}
		{disabled}
	>
		<slot />
	</ion-button>
{/if}