---
import Icon from '../user-components/Icon.astro';
import type { Props } from '../props';

const { editUrl, labels } = Astro.props;
---

{
	editUrl && (
		<a href={editUrl} class="sl-flex">
			<Icon name="pencil" size="1.2em" />
			{labels['page.editLink']}
		</a>
	)
}

<style>
	a {
		gap: 0.5rem;
		align-items: center;
		text-decoration: none;
		color: var(--sl-color-gray-3);
	}
	a:hover {
		color: var(--sl-color-white);
	}
</style>