"use client"
import React from 'react'
import CustomCard from './CustomCard'
import { S } from '../typography'
import { Circle } from 'lucide-react'
import { AnimationWrapper5 } from '../animations'
import { useTranslations } from 'next-intl'
interface IDashboardStatusCard {
    title?: string
    data: { label: string, value: string | number, color?: string }[]
    isHover?: boolean
}
const DashboardStatusCard = ({ title, data, isHover }: IDashboardStatusCard) => {
    const t = useTranslations()
    return (
        <CustomCard className={`relative shadow-md flex flex-col gap-2 w-full hover:shadow-black/25 duration-300  ${isHover ? 'shadow-xl shadow-orange-200 border-orange-200 -translate-y-1 duration-500' : "border-gray-50"}`}>
            <span className={`${isHover ? "opacity-100" : "opacity-0"}  absolute right-[14px] top-8 w-[10px] h-[10px]   animate-customPing bg-orange-400 duration-1000 rounded-full z-[-1]`}></span>
            <AnimationWrapper5 isChild >
                <S>{t(title)}</S>
            </AnimationWrapper5>
            <div className='flex flex-col gap-4'>
                {data.map((item, index) => (
                    <AnimationWrapper5 isChild key={index}>
                        <div className={`flex items-center justify-between pb-1 duration-300 delay-200 ${index + 1 < data.length && `border-b ${isHover && index === 0 ? 'border-orange-400' : 'border-gray-200'}`}`}>

                            <div className='flex items-center gap-2'>
                                <Circle className='text-transparent w-3 h-3' style={{ fill: item.color }} />
                                <S>{t(item.label)}</S>
                            </div>
                            <small style={{ color: item.color }}>{item.value}</small>
                        </div>
                    </AnimationWrapper5>
                ))}

            </div>

        </CustomCard>

    )
}

export default DashboardStatusCard