---
import { objectOmit } from '@dzeio/object-util'
import type ButtonProps from './Props'

export interface Props extends ButtonProps {}

const classes = [
	"button",
	{outline: Astro.props.outline},
	{ghost: Astro.props.ghost},
	Astro.props.class
]

---
{'href' in Astro.props && (
	<a class:list={classes} {...objectOmit(Astro.props, 'type') as any}>
		<slot />
	</a>
) || (
	<button class:list={classes} {...objectOmit(Astro.props, 'type') as any}>
		<slot />
	</button>
)}

<style>
	.button:not(.outline) {
		@apply px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-md transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2;
	}
	.button.outline {
		@apply px-4 py-2 rounded-xl border border-blue-600 text-blue-600 hover:bg-blue-50 active:bg-blue-100 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2;
	}
	.button.ghost {
		@apply px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-100 active:bg-gray-200 transition duration-150;
		background-color: transparent;
		border: none;
		font-weight: 500;
		font-family: system-ui, sans-serif;
	}
</style>