---
import { cn } from "@/utils/tailwind";

const { class: className, as: Tag = "div", title, href, ...props } = Astro.props;
---

<Tag
	class={cn(
		className,
		"flex flex-row items-center gap-x-2",
		href && "hover:opacity-75 transition-all"
	)}
	href={href}
	{...props}
>
	<slot name="icon" />
	<p>{title}</p>
</Tag>