import { cn } from "@/lib/utils";
import { ArrowLeft } from "lucide-react";
import { ReactNode } from "react";

interface StatItem {
  label: string;
  value: string | number;
}

interface StatsRowProps {
  stats: StatItem[];
  separator?: ReactNode;
  className?: string;
}

/**
 * Displays a row of stats with separators between them.
 * Commonly used for showing views, shares, comments, likes in a horizontal layout.
 */
export function StatsRow({ stats, separator, className }: StatsRowProps) {
  const defaultSeparator = (
    <div className="flex items-center justify-center size-4 shrink-0">
      <ArrowLeft className="w-4 h-4 rotate-90 text-muted-foreground" />
    </div>
  );

  const Separator = separator ?? defaultSeparator;

  return (
    <div className={cn("flex gap-1 items-center", className)}>
      {stats.map((stat, index) => (
        <div key={stat.label} className="contents">
          <div className="flex gap-1 items-center text-xs">
            <span className="text-muted-foreground text-start">
              {stat.label}
            </span>
            <span className="font-semibold text-foreground leading-[18px] text-start">
              {typeof stat.value === "number"
                ? stat.value.toLocaleString()
                : stat.value}
            </span>
          </div>
          {index < stats.length - 1 && Separator}
        </div>
      ))}
    </div>
  );
}