---
import Tag from '@components/blog/Tag.astro';

interface Props {
    tags: string[];
    maxVisible?: number;
    size?: 'sm' | 'md';
    className?: string;
    isLink?: boolean;
}

const {
    tags = [],
    maxVisible = 3, // Увеличил дефолт до 3, так красивее
    size = 'md',
    className = '',
    isLink = true,
} = Astro.props;

if (!tags || (Array.isArray(tags) && tags.length === 0) || (typeof tags === 'string' && tags.length === 0)) return null;

let processedTags = [];
if (Array.isArray(tags)) {
    processedTags = tags;
} else if (typeof tags === 'string') {
    try {
        processedTags = JSON.parse(tags);
    } catch (e) {
        console.error('Error parsing tags:', e);
        processedTags = [];
    }
} else {
    processedTags = [];
}

const visibleTags = processedTags.slice(0, maxVisible);
const hiddenTagsCount = processedTags.length - visibleTags.length;
---

<div class={`flex flex-wrap items-center gap-2 ${className}`}>
    {visibleTags.map((tag) => (
            <Tag tag={tag} size={size} isLink={isLink} />
    ))}

    {hiddenTagsCount > 0 && (
            <span class={`font-medium text-gray-400 select-none ${size === 'sm' ? 'text-xs' : 'text-sm'}`}>
            +{hiddenTagsCount}
        </span>
    )}
</div>
