<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements'
	import Panel from './Panel.svelte';

	export type Props = {
		children?: HTMLButtonAttributes['children'],
		variant?: 'primary' | 'secondary' | 'success' | 'error'
	}

	const { children, variant, placeholder, ...props }: Props = $props()
	const tag = $derived(props.href != null ? 'a' : 'button')

</script>

<Panel class={['barbi-button', `barbi-button-${variant}`, !!placeholder && 'placeholder']} space="sm" {...props} tag={tag} hover active onclick={() => alert("foo")}>
	{@render children?.()}
</Panel>

<style>
	:global {
			a.panel.barbi-button,
			.panel.barbi-button a {
					text-decoration: none;
      }
			.panel.barbi-button {
					cursor: pointer;
					--component-background: var(--colour-primary);
			}

			.panel.barbi-button.placeholder {
					cursor: inherit;
					pointer-events: none !important;
					width: 0 !important;
					opacity: 0 !important;
			}

			.panel.barbi-button:disabled {
					cursor: not-allowed;
					--component-background: var(--colour-concrete);
					--component-colour: var(--colour-slate);
          --border-colour: var(--colour-steel);
					--colour-shadow: var(--colour-steel);
			}

			.panel.barbi-button:hover:not(:disabled) {
					cursor: pointer;
					--component-background: var(--colour-secondary);
			}

			.panel.barbi-button.barbi-button-primary:not(:disabled) {
					--component-background: var(--colour-primary);
			}
      .panel.barbi-button.barbi-button-primary:hover:not(:disabled) {
					--component-background: var(--colour-secondary);
      }

			.panel.barbi-button.barbi-button-secondary:not(:disabled) {
					--component-background: var(--colour-emphasis);
			}
      .panel.barbi-button.barbi-button-secondary:hover:not(:disabled) {
					--component-background: var(--colour-mustard);
      }

			.panel.barbi-button.barbi-button-success:not(:disabled) {
					--component-background: var(--colour-success);
			}
      .panel.barbi-button.barbi-button-success:hover:not(:disabled) {
					--component-background: var(--colour-pastel);
      }

			.panel.barbi-button.barbi-button-error:not(:disabled) {
					--component-background: var(--colour-error);
			}
      .panel.barbi-button.barbi-button-error:hover:not(:disabled) {
					--component-background: var(--colour-mustard);
      }

	}
</style>