"use client"
//Когда нужен "use client"?
// Если компонент использует React хуки (useState, useEffect, useContext и т.п.).
// Если он взаимодействует с браузерными API или DOM.
// Если он содержит обработчики событий или управляет состоянием.


import type React from "react"

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

//Это тип компонента React, который принимает определенные пропсы.
//     React.ComponentType<...> — это тип компонента, который можно использовать как JSX <Icon />.
//     Внутри <...> указаны пропсы, которые этот компонент принимает.

// Какие пропсы у иконки?

//     size?: number — необязательный размер иконки (например, в пикселях).
//     fill?: string — необязательный цвет заливки.
//     className?: string — необязственный CSS-класс.
//     style?: React.CSSProperties — необязательные inline-стили.




export const StatCardHome: React.FC<StatCardProps> = ({
  title,
  subtitle,
  icon: Icon,
  fill,
  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}
        fill={"#E6E5E5"}
        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}
        fill={fill}
        />      
      </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>
  )
}