"use client"

import React from 'react'
import { Package, Warehouse, TrendingUp, TrendingDown, MapPin } from 'lucide-react'

interface StatsCardsProps {
  totalProducts: number
  totalStocks: number
  totalReserved: number
  totalFromClient: number
  activeWarehouses: number
  loading: boolean
}

export function StatsCards({
  totalProducts,
  totalStocks,
  totalReserved,
  totalFromClient,
  activeWarehouses,
  loading
}: StatsCardsProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4">
      {/* Товаров */}
      <div className="group relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/10 border border-blue-500/20 p-3 hover:border-blue-400/40 transition-all duration-300 hover:scale-105">
        <div className="flex items-center justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <Package className="h-4 w-4 text-blue-400" />
              <span className="text-blue-300 text-xs font-medium uppercase tracking-wide">Товаров</span>
            </div>
            <div className="text-xl font-bold text-white">
              {loading ? <div className="h-5 w-8 bg-white/10 rounded animate-pulse" /> : totalProducts.toLocaleString()}
            </div>
          </div>
        </div>
        <div className="absolute inset-0 bg-gradient-to-r from-blue-500/0 via-blue-500/5 to-blue-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>

      {/* Общий остаток */}
      <div className="group relative overflow-hidden rounded-xl bg-gradient-to-br from-green-500/20 to-green-600/10 border border-green-500/20 p-3 hover:border-green-400/40 transition-all duration-300 hover:scale-105">
        <div className="flex items-center justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <Warehouse className="h-4 w-4 text-green-400" />
              <span className="text-green-300 text-xs font-medium uppercase tracking-wide">Остаток</span>
            </div>
            <div className="text-xl font-bold text-white">
              {loading ? <div className="h-5 w-8 bg-white/10 rounded animate-pulse" /> : totalStocks.toLocaleString()}
            </div>
          </div>
        </div>
        <div className="absolute inset-0 bg-gradient-to-r from-green-500/0 via-green-500/5 to-green-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>

      {/* К клиенту */}
      <div className="group relative overflow-hidden rounded-xl bg-gradient-to-br from-orange-500/20 to-orange-600/10 border border-orange-500/20 p-3 hover:border-orange-400/40 transition-all duration-300 hover:scale-105">
        <div className="flex items-center justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <TrendingUp className="h-4 w-4 text-orange-400" />
              <span className="text-orange-300 text-xs font-medium uppercase tracking-wide">К клиенту</span>
            </div>
            <div className="text-xl font-bold text-white">
              {loading ? <div className="h-5 w-8 bg-white/10 rounded animate-pulse" /> : totalReserved.toLocaleString()}
            </div>
          </div>
        </div>
        <div className="absolute inset-0 bg-gradient-to-r from-orange-500/0 via-orange-500/5 to-orange-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>

      {/* От клиента */}
      <div className="group relative overflow-hidden rounded-xl bg-gradient-to-br from-red-500/20 to-red-600/10 border border-red-500/20 p-3 hover:border-red-400/40 transition-all duration-300 hover:scale-105">
        <div className="flex items-center justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <TrendingDown className="h-4 w-4 text-red-400" />
              <span className="text-red-300 text-xs font-medium uppercase tracking-wide">От клиента</span>
            </div>
            <div className="text-xl font-bold text-white">
              {loading ? <div className="h-5 w-8 bg-white/10 rounded animate-pulse" /> : totalFromClient.toLocaleString()}
            </div>
          </div>
        </div>
        <div className="absolute inset-0 bg-gradient-to-r from-red-500/0 via-red-500/5 to-red-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>

      {/* Складов */}
      <div className="group relative overflow-hidden rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-600/10 border border-purple-500/20 p-3 hover:border-purple-400/40 transition-all duration-300 hover:scale-105">
        <div className="flex items-center justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <MapPin className="h-4 w-4 text-purple-400" />
              <span className="text-purple-300 text-xs font-medium uppercase tracking-wide">Складов</span>
            </div>
            <div className="text-xl font-bold text-white">
              {loading ? <div className="h-5 w-8 bg-white/10 rounded animate-pulse" /> : activeWarehouses}
            </div>
          </div>
        </div>
        <div className="absolute inset-0 bg-gradient-to-r from-purple-500/0 via-purple-500/5 to-purple-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>
    </div>
  )
} 