"use client";

import { Package, Users, CreditCard } from "lucide-react";
import { AnimatedCounter } from "./animated-counter";
import { PlatformStats } from "@/lib/stats-service";

const formatCurrency = (value: number) => {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
    minimumFractionDigits: 0,
  }).format(value);
};

interface AnimatedStatsProps {
  stats: PlatformStats;
}

export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
  return (
    <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 mt-8">
      <div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
        <div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
          <Package className="h-8 w-8" />
        </div>
        <div className="text-3xl font-bold text-white">
          <AnimatedCounter 
            value={stats.orders.completed} 
            duration={2000}
            suffix="+"
          />
        </div>
        <h3 className="text-xl font-bold text-white">
          Completed Orders
        </h3>
        <p className="text-center text-zinc-400">
          Successfully fulfilled orders across our platform
        </p>
      </div>
      
      <div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
        <div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
          <Users className="h-8 w-8" />
        </div>
        <div className="text-3xl font-bold text-white">
          <AnimatedCounter 
            value={stats.vendors.total} 
            duration={2000}
            suffix="+"
          />
        </div>
        <h3 className="text-xl font-bold text-white">
          Registered Vendors
        </h3>
        <p className="text-center text-zinc-400">
          Active sellers offering products on our marketplace
        </p>
      </div>
      
      <div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
        <div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
          <CreditCard className="h-8 w-8" />
        </div>
        <div className="text-3xl font-bold text-white">
          <AnimatedCounter 
            value={stats.transactions.volume} 
            duration={2500}
            formatter={formatCurrency}
          />
        </div>
        <h3 className="text-xl font-bold text-white">
          Transaction Volume
        </h3>
        <p className="text-center text-zinc-400">
          Total value of successful transactions processed
        </p>
      </div>
    </div>
  );
}