---
interface Props {
    tag: string;
    count?: number;
    size?: 'sm' | 'md';
    isLink?: boolean;
}

const { tag, count, size = 'md', isLink = true } = Astro.props;

// Настройка размеров
const sizeClasses = {
    sm: 'px-2.5 py-0.5 text-xs',
    md: 'px-3 py-1.5 text-sm',
};

// Базовые стили: используем slate гамму
const baseClass = `
    ${sizeClasses[size]}
    font-medium rounded-full
    inline-flex items-center
    bg-slate-100 text-slate-600 border border-transparent
    transition-all duration-200 ease-in-out
`;

// Стили при наведении (только если это ссылка) - используем indigo (синий) для hover
const hoverClass = isLink
    ? "hover:bg-indigo-50 hover:text-indigo-600 hover:border-indigo-100 hover:shadow-sm cursor-pointer active:scale-95"
    : "cursor-default";
---

<div class="inline-block">
    {isLink ? (
            <a href={`/blog/tags/${encodeURIComponent(tag)}`} class={`${baseClass} ${hoverClass}`}>
                <span class="opacity-50 mr-1 font-bold">#</span>
                {tag}
                {count !== undefined && (
                        <span class="ml-1.5 opacity-60 text-[0.9em] bg-white/50 px-1.5 rounded-full">
                    {count}
                </span>
                )}
            </a>
    ) : (
            <span class={`${baseClass} ${hoverClass}`}>
            <span class="opacity-50 mr-1 font-bold">#</span>
                {tag}
                {count !== undefined && (
                        <span class="ml-1.5 opacity-60">({count})</span>
                )}
        </span>
    )}
</div>