---
// Cspell:words astro classnames darkgrey
import cx from 'classnames';
import Link from './Link.astro';

export interface Props {
	class?: string;
	href?: string;
	label: string;
	[key: string]: any;
}

const { label, class: className, href, ...props } = Astro.props;

const classes = cx(
	'rounded-1 border-1 border-solid border-[darkgrey] bg-[lightgrey] font-mono text-[0.7em] text-black decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] dark:bg-[lightgrey]/80',
	className
);
---

{
	href ? (
		<Link class={classes} href={href} title={label} {...props}>
			<span class="hidden" aria-hidden="true">
				[
			</span>
			{label}
			<span class="hidden" aria-hidden="true">
				]
			</span>
		</Link>
	) : (
		<span class={classes} title={label} {...props}>
			<span class="hidden" aria-hidden="true">
				[
			</span>
			{label}
			<span class="hidden" aria-hidden="true">
				]
			</span>
		</span>
	)
}