<script lang="ts">
	interface Props {
		href?: string
		title?: string
		sourceType?: string
		date?: string
		source?: string
	}

	let { href = '', title = '', sourceType = '', date = '', source = '' }: Props = $props()
</script>

<li class="mention">
	<a {href} target="_blank">
		<h4>{title}</h4>
		<footer>
			{#if source}
				<span class="source">{source}</span>
			{/if}
			<span class="source-type">{sourceType}</span>
			<time>{date}</time>
		</footer>
	</a>
</li>

<style lang="scss">
	$card-color: #f7f7f7;
	$page-horz-padding: 20px;
	$card-height: 200px;
	$mention-padding: 15px;
	$font-size: 16px;
	$line-height: 1.5;
	$font-weight-med: 500;

	.mention {
		background: $card-color;
		border-radius: $corner-radius;
		cursor: pointer;
		transition: background 0.2s ease-in-out;

		&:hover {
			background: darken($card-color, 2%);
		}

		a {
			display: flex;
			flex-direction: column;
			font-size: $font-size;
			line-height: $line-height;
			padding: $unit-3x;
			text-decoration: none;
			color: inherit;
		}

		h4 {
			display: block;
			font-weight: 400;
			font-size: 1rem;
			flex-grow: 2;
			margin: 0;

			cite {
				font-style: normal;
			}
		}

		footer {
			color: $gray-50;
			flex-grow: 0;
			font-weight: $font-weight-med;
			font-size: 0.9rem;
		}

		.source,
		.source-type {
			margin-right: $unit;
		}
	}
</style>
