"use client"

import Link from "next/link"
import { useLocale } from "@/lib/i18n/context"
import { mockCategories } from "@/lib/mock-data"
import {
  Landmark,
  Scale,
  TrendingUp,
  Eye,
  Radio,
  Shield,
  MessageCircle,
  ArrowRight,
} from "lucide-react"

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  Landmark,
  Scale,
  TrendingUp,
  Eye,
  Radio,
  Shield,
  MessageCircle,
}

export default function CategoriesPage() {
  const { locale, t } = useLocale()

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-foreground">
          {t.nav.categories}
        </h1>
        <p className="mt-1 text-sm text-muted-foreground">
          {locale === "tr"
            ? "Ilgi alaniniza gore konulari kesfedIn."
            : "Explore topics by your area of interest."}
        </p>
      </div>

      <div className="grid gap-3 sm:grid-cols-2">
        {mockCategories.map((category) => {
          const Icon = iconMap[category.icon] || MessageCircle
          const name = locale === "tr" ? category.name_tr : category.name_en
          const desc = locale === "tr" ? category.description_tr : category.description_en

          return (
            <Link
              key={category.id}
              href={`/categories/${category.slug}`}
              className="group flex items-start gap-4 rounded-lg border border-border bg-card p-5 transition-colors hover:bg-muted/50"
            >
              <div
                className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md"
                style={{ backgroundColor: `${category.color}15`, color: category.color }}
              >
                <Icon className="h-5 w-5" />
              </div>
              <div className="flex min-w-0 flex-1 flex-col gap-1">
                <div className="flex items-center justify-between">
                  <h2 className="font-semibold text-foreground group-hover:text-primary transition-colors">
                    {name}
                  </h2>
                  <ArrowRight className="h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
                </div>
                <p className="text-sm leading-relaxed text-muted-foreground">{desc}</p>
                <span className="mt-1 text-xs text-muted-foreground">
                  {category.thread_count} {locale === "tr" ? "konu" : "threads"}
                </span>
              </div>
            </Link>
          )
        })}
      </div>
    </div>
  )
}