"use client";

import React from "react";
import type { LucideIcon } from "lucide-react";

const TONES = {
  green: { bg: "bg-emerald-50", icon: "text-emerald-600" },
  blue: { bg: "bg-blue-50", icon: "text-blue-600" },
  violet: { bg: "bg-violet-50", icon: "text-violet-600" },
  amber: { bg: "bg-amber-50", icon: "text-amber-600" },
  rose: { bg: "bg-rose-50", icon: "text-rose-600" },
  gray: { bg: "bg-gray-100", icon: "text-gray-600" },
} as const;

export type StatTileTone = keyof typeof TONES;

export function StatTile({ icon: Icon, label, value, tone = "gray" }: { icon: LucideIcon; label: string; value: string; tone?: StatTileTone }) {
  const t = TONES[tone] || TONES.gray;
  return (
    <div className={"flex items-center gap-3 rounded-xl p-3 " + t.bg}>
      <div className="w-9 h-9 rounded-lg bg-white/70 flex items-center justify-center shrink-0">
        <Icon className={"w-5 h-5 " + t.icon} />
      </div>
      <div className="min-w-0">
        <div className="text-xs text-gray-500 truncate">{label}</div>
        <div className="text-sm font-semibold text-gray-900 truncate">{value}</div>
      </div>
    </div>
  );
}

export function StatTileRow({ children }: { children: React.ReactNode }) {
  return <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">{children}</div>;
}