---
// Теги для блога (статические данные для примера)
const tags = [
  { name: "Законодательство", count: 15, size: "large" },
  { name: "Судебная практика", count: 12, size: "medium" },
  { name: "Бизнес", count: 8, size: "medium" },
  { name: "Недвижимость", count: 6, size: "small" },
  { name: "Семья", count: 4, size: "small" },
  { name: "Налоги", count: 10, size: "large" },
  { name: "Трудовое право", count: 7, size: "medium" },
  { name: "Защита прав", count: 5, size: "small" },
  { name: "Арбитраж", count: 9, size: "medium" },
  { name: "Уголовное право", count: 11, size: "large" },
  { name: "Административное", count: 3, size: "small" },
  { name: "Договоры", count: 6, size: "small" },
];

// Функция для получения размера тега
function getTagClasses(size: string) {
  const baseClasses =
    "inline-flex items-center px-4 py-2 bg-[var(--color-blue-primary)]/10 border border-[var(--color-blue-primary)]/20 rounded-full font-medium transition-all duration-300 hover:bg-[var(--color-blue-primary)] hover:border-[var(--color-blue-primary)] hover:text-white hover:shadow-lg hover:shadow-[var(--color-blue-primary)]/30 hover:-translate-y-0.5 cursor-pointer";

  switch (size) {
    case "large":
      return `${baseClasses} text-base text-[var(--color-blue-primary)]`;
    case "medium":
      return `${baseClasses} text-sm text-[var(--color-blue-primary)]`;
    default:
      return `${baseClasses} text-xs text-[var(--color-blue-primary)]`;
  }
}
---

<div
  class="bg-white/80 backdrop-blur-xl p-6 rounded-2xl shadow-lg border border-white/50"
>
  <h4 class="font-bold text-gray-900 mb-2 flex items-center gap-2 justify-center text-center md:justify-start">
    <svg
      class="w-5 h-5 text-[var(--color-gold)] flex-shrink-0"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.148"
      ></path>
    </svg>
    <span class="text-center">Облако тегов</span>
  </h4>
  <p class="text-sm text-gray-600 mb-4 text-center md:text-left">Найдите статьи по ключевому тегу</p>

  <div class="flex flex-wrap gap-2">
    {
      tags.map((tag) => (
        <a
          href={`/blog/search?q=${encodeURIComponent(tag.name)}`}
          class={getTagClasses(tag.size)}
          title={`${tag.count} статей`}
        >
          {tag.name}
          <span class="ml-1.5 px-1.5 py-0.5 bg-[var(--color-blue-primary)]/20 rounded-full text-[10px] font-bold">
            {tag.count}
          </span>
        </a>
      ))
    }
  </div>
</div>
