---
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>
	)
}
