---
/**
 * 公共下拉面板选项组件
 * 用于下拉面板中的选项项
 */
interface Props {
	href?: string;
	target?: string;
	isActive?: boolean;
	isLast?: boolean;
	class?: string;
	onclick?: string;
}

const {
	href,
	target,
	isActive = false,
	isLast = false,
	class: className,
	onclick,
} = Astro.props;

const baseClasses =
	"flex transition whitespace-nowrap items-center justify-start! w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95";
const spacingClass = isLast ? "" : "mb-0.5";
const activeClass = isActive ? "current-theme-btn" : "";
const allClasses =
	`${baseClasses} ${spacingClass} ${activeClass} ${className || ""}`.trim();

const Tag = href ? "a" : "button";
---

<Tag 
	href={href}
	target={target}
	class={allClasses}
	onclick={onclick}
>
	<slot />
</Tag>