---
const { position, text, url, id, onClick, name } = Astro.props;
import ExternalIcon from "@assets/svg/external.svg";
---

<style>
	.button-wrapper {
		background: linear-gradient(#343343, #2e2e3e, #2e2e3e);
		transition: 0.54s
			linear(
				0,
				0.0021,
				0.0081 1.26%,
				0.0302 2.51%,
				0.106,
				0.2088 7.53%,
				0.5809 15.7%,
				0.7667 20.72%,
				0.8391 23.23%,
				0.9106 26.37%,
				0.9538 28.88%,
				0.9926 32.02%,
				1.0134,
				1.0269 37.04%,
				1.0359,
				1.0384 43.32%,
				1.0353 47.72%,
				1.0124 61.53%,
				1.003 70.32%,
				0.9988 81.62%,
				0.9992 99.83%
			);
		clip-path: var(--clip-button-outer);
		cursor: pointer;
		user-select: none;
	}
	button,
	a {
		width: 100%;
		text-decoration: none;
		cursor: pointer;
		-webkit-user-drag: none;
	}
	button {
		border: none;
		background-color: #2b2b3b;
		clip-path: var(--clip-button-inner);
		color: var(--text);
		padding: 10px 20px;
	}
	.button-wrapper:has(button:hover:active) {
		background: #2f2f41;
		transform: scale(0.98);
	}
	button:hover:active {
		background-color: #2f2f41;
	}
	.link-button {
		padding: 15px;
		text-align: left;
		display: flex;
		gap: 0.5rem;
		flex-direction: column;
		align-items: stretch;
	}
	.link-button-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.link-button-heading > span {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		line-height: 0;
	}
	:global(.link-button-heading svg) {
		width: 16px;
		height: 16px;
	}
</style>
{
	url ? (
		<a href={url}>
			<div class="button-wrapper">
				<button id={id} class="link-button">
					{name && (
						<div class="link-button-heading">
							<span>
								<slot name="icon" />
								<b>{name}</b>
							</span>
							<ExternalIcon />
						</div>
					)}
					<slot />
				</button>
			</div>
		</a>
	) : (
		<div class="button-wrapper">
			<button id={id}>
				<slot />
			</button>
		</div>
	)
}
