<script lang="ts" module>
	export type ButtonShape = 'square' | 'circle';
	export type ButtonStyle = 'outline' | 'dash' | 'soft' | 'ghost' | 'link';
</script>

<script lang="ts">
	import type { DaisyColor, DaisySize } from '$lib/types';
	import clsx from 'clsx';
	import type { SvelteHTMLElements } from 'svelte/elements';
	import { twMerge } from 'tailwind-merge';

	type Props = {
		active?: boolean;
		block?: boolean;
		color?: DaisyColor;
		full?: boolean;
		shape?: ButtonShape;
		size?: DaisySize;
		style?: ButtonStyle;
		wide?: boolean;
	} & SvelteHTMLElements['button'];

	let {
		active = false,
		block = false,
		children,
		class: className,
		color,
		full = false,
		shape,
		size,
		style,
		wide = false,
		...props
	}: Props = $props();
</script>

<button
	{...props}
	class={twMerge('btn', clsx(className))}
	class:btn-active={active}
	class:btn-block={block}
	class:btn-neutral={color === 'neutral'}
	class:btn-primary={color === 'primary'}
	class:btn-secondary={color === 'secondary'}
	class:btn-accent={color === 'accent'}
	class:btn-info={color === 'info'}
	class:btn-success={color === 'success'}
	class:btn-warning={color === 'warning'}
	class:btn-error={color === 'error'}
	class:btn-disabled={props.disabled}
	class:w-full={full}
	class:btn-circle={shape === 'circle'}
	class:btn-square={shape === 'square'}
	class:btn-xs={size === 'xs'}
	class:btn-sm={size === 'sm'}
	class:btn-md={size === 'md'}
	class:btn-lg={size === 'lg'}
	class:btn-xl={size === 'xl'}
	class:btn-outline={style === 'outline'}
	class:btn-dash={style === 'dash'}
	class:btn-soft={style === 'soft'}
	class:btn-ghost={style === 'ghost'}
	class:btn-link={style === 'link'}
	class:btn-wide={wide}
>
	{@render children?.()}
</button>

<style></style>