---
export interface Props {
	title: string;
	to: string;
}

const { to, title } = Astro.props;

const isExternal = to.startsWith('http');
---
{ isExternal == true ? (
	<a href={to} target="_blank" rel="noopener noreferrer" class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
		<p>{title} →</p>
	</a>
) : (
	<a href={to} class="bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:hover:bg-slate-600 m-4 px-5 py-5 md:px-10 rounded-3xl shadow-lg hover:shadow-xl">
		<p>{title} →</p>
	</a>
)
}
<style lang="scss">
@use '../assets/styles/colours';
.card {
	margin: 1rem;
	padding: 1.5rem;
	text-align: left;
	color: inherit;
	text-decoration: none;
	border: 2px solid #000;
	border-radius: 20px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.card p {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.5;
}

.card:link,
.card:visited {
	color: #000;
}

.card:hover,
.card:focus,
.card:active {
	color: colours.$accent-colour-light !important;
	border-color: colours.$accent-colour-light;
}

@media (max-width: 600px) {
	.card {
		margin: 0.5rem;
		padding: 1.25rem;
		width: 9rem;
	}
}
</style>