"use client";

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

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

interface AnimatedStatsProps {
  stats: PlatformStats;
}

export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
  return (
    <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
      <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
        <div className="relative flex flex-col items-center">
          <Package className="h-6 w-6 text-[#D53F8C]" />
          <div className="mt-4 text-3xl font-bold text-white">
            <AnimatedCounter 
              value={stats.orders.completed} 
              duration={2000}
              suffix="+"
            />
          </div>
          <h3 className="mt-2 text-lg font-medium text-white">
            Completed Orders
          </h3>
          <p className="mt-1 text-sm text-zinc-500">
            Successfully fulfilled orders across our platform
          </p>
        </div>
      </div>
      
      <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
        <div className="relative flex flex-col items-center">
          <Users className="h-6 w-6 text-[#D53F8C]" />
          <div className="mt-4 text-3xl font-bold text-white">
            <AnimatedCounter 
              value={stats.vendors.total} 
              duration={2000}
              suffix="+"
            />
          </div>
          <h3 className="mt-2 text-lg font-medium text-white">
            Registered Vendors
          </h3>
          <p className="mt-1 text-sm text-zinc-500">
            Active sellers offering products on our marketplace
          </p>
        </div>
      </div>
      
      <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
        <div className="relative flex flex-col items-center">
          <CreditCard className="h-6 w-6 text-[#D53F8C]" />
          <div className="mt-4 text-3xl font-bold text-white">
            <AnimatedCounter 
              value={stats.transactions.volume} 
              duration={2500}
              formatter={formatCurrency}
            />
          </div>
          <h3 className="mt-2 text-lg font-medium text-white">
            Transaction Volume
          </h3>
          <p className="mt-1 text-sm text-zinc-500">
            Total value of successful transactions processed
          </p>
        </div>
      </div>
    </div>
  );
} 