---
import type { Icons } from "@components/icons/Icon.astro";
import Icon from "@components/icons/Icon.astro";
import type { HTMLAttributes } from "astro/types";

const styles = {
	primary: "bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4",
	secondary: "bg-blue-100 text-blue-500 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200",
}

const sizes = {
	sm: "px-4 py-2 text-sm",
	md: "px-5 py-3 text-md",
	lg: "px-6 py-3 text-lg rounded-2xl"
}

const iconSize = {
	sm: 15,
	md: 18,
	lg: 24
}

interface Props extends HTMLAttributes<"button"> {
	style?: keyof typeof styles
	size?: keyof typeof sizes
	text?: string
	iconLeft?: Icons
	iconRight?: Icons
	href?: string
}

const {
	style = "primary",
	size = "md",
    text = "",
	iconLeft = "",
	iconRight = "",
	...rest
} = Astro.props;

const className = [
	"flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4",
	"rounded-xl font-medium",
	styles[style],
	sizes[size],
	"transition-colors",
	rest.class
].join(" ");

const Element = rest.href ? "a" : "button" as any;
---

<Element {...rest} class={className}>
	{iconLeft && <span class="mr-2"><Icon icon={iconLeft} size={iconSize[size]}></Icon></span>}
	{text ? text : <slot />}
	{iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>}
</Element>