"use client";

import { motion } from "framer-motion";
import { MaterialIcon } from "./MaterialIcon";
import { fadeUp, staggerContainer, viewport } from "@/lib/animations";

type FeatureStatsItem = {
  icon: string;
  title: string;
  desc?: string;
};

type FeatureStatsRowProps = {
  items: FeatureStatsItem[];
  className?: string;
};

export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps) {
  return (
    <motion.div
      className={`w-full py-6 md:py-8 ${className}`}
      variants={staggerContainer}
      initial="hidden"
      whileInView="visible"
      viewport={viewport}
    >
      <div className="grid grid-cols-2 lg:flex lg:flex-row items-center justify-between gap-y-6 gap-x-4 lg:gap-0">
        {items.map((item, index) => (
          <motion.div
            key={item.title}
            variants={fadeUp}
            className={`flex items-center gap-3.5 lg:flex-1 px-3 lg:px-8 text-left ${
              index < items.length - 1
                ? "lg:border-r lg:border-[#6330D6]/10"
                : ""
            }`}
          >
            <div className="w-9 h-9 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
              <MaterialIcon icon={item.icon} size={18} />
            </div>
            <div className="min-w-0">
              <h4 className="text-sm md:text-base font-black text-[#16001D] leading-tight truncate">
                {item.title}
              </h4>
              {item.desc && (
                <p className="text-[11px] md:text-xs text-[#5E5866] font-semibold mt-0.5 leading-tight truncate">
                  {item.desc}
                </p>
              )}
            </div>
          </motion.div>
        ))}
      </div>
    </motion.div>
  );
}