---
import Icon from './Icon.astro';
import type { HTMLAttributes } from 'astro/types';

interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
	title: string;
	description?: string;
}

const { title, description, ...attributes } = Astro.props;
---

<div class="sl-link-card">
	<span class="sl-flex stack">
		<a {...attributes}>
			<span class="title" set:html={title} />
		</a>
		{description && <span class="description" set:html={description} />}
	</span>
	<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
</div>

<style>
	@layer starlight.components {
		.sl-link-card {
			display: grid;
			grid-template-columns: 1fr auto;
			gap: 0.5rem;
			border: 1px solid var(--sl-color-gray-5);
			border-radius: 0.5rem;
			padding: 1rem;
			box-shadow: var(--sl-shadow-sm);
			position: relative;
		}

		a {
			text-decoration: none;
			line-height: var(--sl-line-height-headings);
		}

		/* a11y fix for https://github.com/withastro/starlight/issues/487 */
		a::before {
			content: '';
			position: absolute;
			inset: 0;
		}

		.stack {
			flex-direction: column;
			gap: 0.5rem;
		}

		.title {
			color: var(--sl-color-white);
			font-weight: 600;
			font-size: var(--sl-text-lg);
		}

		.description {
			color: var(--sl-color-gray-3);
			line-height: 1.5;
		}

		.icon {
			color: var(--sl-color-gray-3);
		}

		/* Hover state */
		.sl-link-card:hover {
			background: var(--sl-color-gray-7, var(--sl-color-gray-6));
			border-color: var(--sl-color-gray-2);
		}

		.sl-link-card:hover .icon {
			color: var(--sl-color-white);
		}
	}
</style>
