"use client";

import React from 'react';
import { motion } from 'framer-motion';
import StatCard from './StatCard';

interface StatsProps {
  stats: {
    totalProducts?: number;
    totalVendors?: number;
    totalOrders?: number;
    totalCustomers?: number;
    gmv?: number;
  };
}

function formatNumberValue(num: number = 0): string {
  return new Intl.NumberFormat().format(Math.round(num));
}

function formatCurrencyValue(amount: number = 0): string {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
    maximumFractionDigits: 0
  }).format(amount);
}

export default function StatsSection({ stats }: StatsProps) {
  const { totalProducts = 0, totalVendors = 0, totalOrders = 0, totalCustomers = 0, gmv = 0 } = stats;

  // Container animation variants
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  // Item animation variants
  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        type: "spring",
        stiffness: 260,
        damping: 20
      }
    }
  };

  return (
    <div className="perspective-1000">
      <motion.div
        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        style={{ perspective: "1000px" }}
      >
        <motion.div variants={itemVariants}>
          <StatCard title="Total Products" value={formatNumberValue(totalProducts)} className="h-32" />
        </motion.div>
        
        <motion.div variants={itemVariants}>
          <StatCard title="Total Vendors" value={formatNumberValue(totalVendors)} className="h-32" />
        </motion.div>
        
        <motion.div variants={itemVariants}>
          <StatCard title="Total Orders" value={formatNumberValue(totalOrders)} className="h-32" />
        </motion.div>
        
        <motion.div variants={itemVariants} className="sm:col-span-2 lg:col-span-1">
          <StatCard title="Revenue" value={formatCurrencyValue(gmv)} className="h-32 bg-gradient-to-br from-pink-900/40 to-gray-900 border-pink-800/30" />
        </motion.div>
      </motion.div>
    </div>
  );
}