"use client"

import Link from "next/link"
import { useLocale } from "@/lib/i18n/context"
import type { Category } from "@/lib/mock-data"
import { cn } from "@/lib/utils"

// Category color mapping for visual distinction
const categoryColors: Record<string, string> = {
  tarih: "bg-amber-500/10 text-amber-400 ring-amber-500/20 hover:bg-amber-500/20",
  politika: "bg-blue-500/10 text-blue-400 ring-blue-500/20 hover:bg-blue-500/20",
  ekonomi: "bg-emerald-500/10 text-emerald-400 ring-emerald-500/20 hover:bg-emerald-500/20",
  istihbarat: "bg-purple-500/10 text-purple-400 ring-purple-500/20 hover:bg-purple-500/20",
  medya: "bg-rose-500/10 text-rose-400 ring-rose-500/20 hover:bg-rose-500/20",
  teknoloji: "bg-cyan-500/10 text-cyan-400 ring-cyan-500/20 hover:bg-cyan-500/20",
  genel: "bg-slate-500/10 text-slate-400 ring-slate-500/20 hover:bg-slate-500/20",
}

export function CategoryBadge({ category }: { category: Category }) {
  const { locale } = useLocale()
  const name = locale === "tr" ? category.name_tr : category.name_en
  const colorClass = categoryColors[category.slug] || categoryColors.genel

  return (
    <Link
      href={`/categories/${category.slug}`}
      className={cn(
        "inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ring-1 transition-all duration-200",
        colorClass
      )}
    >
      {name}
    </Link>
  )
}