import React from 'react'
import CustomCard from './CustomCard'
import { useTranslations } from 'next-intl'
import { H3,  S } from '../typography'
import { AnimationWrapper5 } from '../animations'
interface IDashboardStatsCard {
    title?: string
    data: { label: string, value: string | number, color: string }[]
}
const DashboardStatsCard = ({ title, data, }: IDashboardStatsCard) => {
    const t = useTranslations()
    return (
        <CustomCard className='shadow-md flex flex-col gap-8 w-full hover:shadow-black/25  duration-300 border-gray-50 '>
            <AnimationWrapper5 isChild>
                <S>{title}</S>
            </AnimationWrapper5>
            <div className='flex items-center justify-between !pb-2'>
                {data.map((item, index) => (
                    <AnimationWrapper5 isChild key={index}>
                        <div className={`flex flex-col gap-5 py-4 p-2 border rounded-md text-center min-w-24 `}>
                            <H3>{item.value}</H3>
                            <small className='flex items-center p-1 px-2 !font-semibold rounded-md   justify-center ' style={{ background: item?.color.replace(/(\d+,\s*\d+%,\s*\d+%),\s*\d+\)/, '$1, 0.2)'), color: item.color }}>{t(item.label)}</small>
                        </div>
                    </AnimationWrapper5>
                ))}
            </div>

        </CustomCard>
    )
}

export default DashboardStatsCard