"use client"

import { LayoutGrid, Eye, EyeOff, TrendingUp } from "lucide-react"

interface CategoryStatsBarProps {
  total: number
  visible: number
  hidden: number
  withArticles: number
}

const STATS = (props: CategoryStatsBarProps) => [
  {
    label: "Total Categories",
    value: props.total,
    icon: LayoutGrid,
    color: "var(--brand-navy)",
  },
  {
    label: "Visible",
    value: props.visible,
    icon: Eye,
    color: "var(--brand-green)",
  },
  {
    label: "Hidden",
    value: props.hidden,
    icon: EyeOff,
    color: "#F59E0B",
  },
  {
    label: "With Articles",
    value: props.withArticles,
    icon: TrendingUp,
    color: "#0EA5E9",
  },
]

export function CategoryStatsBar(props: CategoryStatsBarProps) {
  const stats = STATS(props)

  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat) => {
        const Icon = stat.icon
        return (
          <div
            key={stat.label}
            className="bg-card rounded-2xl p-5 border border-border flex items-center gap-4"
          >
            <div
              className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0"
              style={{ background: `${stat.color}18` }}
            >
              <Icon
                className="w-5 h-5"
                style={{ color: stat.color }}
                aria-hidden="true"
              />
            </div>
            <div>
              <p className="text-2xl font-bold text-foreground font-sans leading-none">
                {stat.value}
              </p>
              <p className="text-xs text-muted-foreground font-sans mt-1">
                {stat.label}
              </p>
            </div>
          </div>
        )
      })}
    </div>
  )
}