---
type Props = {
	href?: string;
	primaryColor?: string;
	shadowColor?: string;
	bgColor?: string;
	scaleOnHover?: boolean;
	pixelHeight?: string;
	className?: string;
};

const {
	href,
	shadowColor = "rgb(12,12,12)",
	bgColor = "var(--color-secondary)",
	scaleOnHover = false,
	pixelHeight = "70px",
	className = "",
} = Astro.props;
---

<>
	{
		href && (
			<a href={href}>
				<div
					class="card z-10"
					class:list={[{ scale: scaleOnHover }, className]}
				>
					<div class="card-content">
						<slot />
					</div>
				</div>
			</a>
		)
	}
	{
		!href && (
			<div
				class="card z-10 mb-0 rounded-xl"
				class:list={[{ scale: scaleOnHover }, className]}
			>
				<div class="card-content">
					<slot />
				</div>
			</div>
		)
	}
</>

<style define:vars={{ bgColor, pixelHeight, shadowColor }}>
	* {
		box-sizing: border-box;
	}

	h1,
	h2,
	h3,
	p {
		margin: 0rem;
	}

	.card {
		/* background: #1c1c1c; */
		/* background: linear-gradient(135deg, rgb(38, 38, 38)#101010 20%,  100%); */
		box-shadow: 0 8px 20px 2px var(--shadowColor);
		padding: 0.5rem;
	}
</style>