/**
 * StatsRow - Blog statistics display component
 *
 * Shows key blog statistics like article count, language support,
 * and update frequency in the hero section.
 */

import { BLOG_COLORS, getBlogTranslations } from "@/lib/blog.config";

export interface StatsRowProps {
  /** Total number of posts */
  totalPosts: number;
  /** Language for localization */
  lang: "ar" | "en";
}

export default function StatsRow({ totalPosts, lang }: StatsRowProps) {
  const t = getBlogTranslations(lang);

  const stats = [
    { label: `${totalPosts} ${t.articles}` },
    { label: t.arabicEnglish },
    { label: t.weeklyUpdates },
  ];

  return (
    <div className="flex flex-wrap gap-8">
      {stats.map((stat, index) => (
        <div key={index} className="flex items-center gap-3">
          <div
            className="w-1.5 h-1.5"
            style={{ backgroundColor: BLOG_COLORS.primary }}
          />
          <span className="font-medium" style={{ color: BLOG_COLORS.heading }}>
            {stat.label}
          </span>
        </div>
      ))}
    </div>
  );
}