---
import type { Polymorphic } from "astro/types";

type Props<Tag extends "a" | "button"> = Polymorphic<{
	as: Tag;
	variant?: "outline" | "solid";
	size?: "sm" | "md" | "lg" | "inherit";
}>;

export type { Props as ButtonProps };

const {
	as: Tag = "button",
	variant = "solid",
	size = "md",
	class: className,
	...props
} = Astro.props;
---

<Tag class:list={[`btn btn--${variant} btn--${size}`, className]} {...props}
	><slot /></Tag
>

<style>
	.btn {
		display: inline-block;
		border: none;
		border-radius: 9999px;
		padding-block: var(--space-sm);
		padding-inline: var(--space-md);
		font-family: var(--font-family-heading);
		line-height: var(--line-height-heading);
		text-decoration: none;
		cursor: pointer;
		transition:
			background-color 0.2s ease,
			color 0.3s ease;
		appearance: none;
	}

	.btn--outline {
		background-color: transparent;
		color: inherit;
		box-shadow: inset 0px 0px 0px 2px var(--color-green);

		&:hover {
			background-color: var(--color-green);
			color: var(--color-white);
		}

		&[disabled] {
			box-shadow: inset 0px 0px 0px 2px var(--color-gray-500);
			color: var(--color-gray-700);
			cursor: default;
		}
	}

	.btn--solid {
		background-color: var(--color-green);
		color: var(--color-white);

		&:hover {
			background-color: var(--color-green-700);
		}

		&[disabled] {
			background-color: var(--color-gray-500);
			cursor: default;
		}
	}

	.btn--inherit {
		font-size: inherit;
	}

	.btn--sm {
		font-size: var(--font-size-sm);
	}

	.btn--md {
		font-size: var(--font-size-md);
	}

	.btn--lg {
		padding-inline: var(--space-lg);
		font-size: var(--font-size-lg);
		line-height: var(--line-height-body);
	}
</style>