"use client"

import type React from "react"

interface StatCardProps {
  title: string
  subtitle: string
  icon: React.ComponentType<{ size?: number; className?: string; color?: string }>
  iconColor: string
  backgroundIconColor: string
  onClick: () => void
}

export const StatCard: React.FC<StatCardProps> = ({
  title,
  subtitle,
  icon: Icon,
  iconColor,
  backgroundIconColor,
  onClick,
}) => {
  return (
    <div
      onClick={onClick}
      className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden cursor-pointer"
    >
      {/* Фоновая иконка */}
      <Icon size={180} color={backgroundIconColor} className="absolute -right-8 -top-8 -rotate-45" />

      {/* Основная иконка */}
      <div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl mb-4 z-20 relative">
        <Icon size={40} color={iconColor} />
      </div>

      {/* Текст */}
      <div className="text-xl font-bold text-gray-800 mb-1 z-20 relative">{title}</div>
      <div className="text-base text-gray-600 z-20 relative">{subtitle}</div>
    </div>
  )
}