import { ReactNode } from "react"

interface StatsCardProps {
  label: string
  value: string | number
  icon: ReactNode
  borderColor: string
  valueColor: string
  iconBgColor: string
}

export default function StatsCard({ label, value, icon, borderColor, valueColor, iconBgColor }: StatsCardProps) {
  return (
    <div
      className={`flex items-center justify-between w-full p-5 bg-white rounded-[14px] border-l-4 ${borderColor} border-t-0 border-b-0 border-r-0`}
    >
      <div className="flex flex-col gap-1">
        <div className="text-sm font-normal text-[#4A5565]">{label}</div>
        <div className={`text-[30px] font-normal leading-9 ${valueColor}`}>{value}</div>
      </div>
      <div className={`w-12 h-12 rounded-[10px] flex items-center justify-center ${iconBgColor}`}>{icon}</div>
    </div>
  )
}