import React from 'react'

interface CardStatsProps {
  color: string
  title: string
  value: number | string
  icon: React.ReactNode
}

const CardStats: React.FC<React.PropsWithChildren<CardStatsProps>> = (
  props,
) => {
  return (
    <div className="bg-white border p-6 px-8 rounded border-slate-200 h-full flex flex-col">
      <div className="flex items-center gap-2">
        <div
          className={`bg-${props.color}-100 w-10 h-10 rounded-full flex items-center justify-center`}
        >
          {props.icon}
        </div>
        <p className="font-medium">{props.title}</p>
      </div>

      <div className="mt-5 flex flex-col flex-1">
        <h5 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
          {props.value}
        </h5>
        {props.children && (
          <div className="mt-auto pt-2 leading-snug">{props.children}</div>
        )}
      </div>
    </div>
  )
}

export default CardStats