"use client"
import { AnimationWrapper } from "@/components/ui/animations";
import { motion } from "framer-motion"
import { useTranslations } from "next-intl";
import Link from "next/link";
import React from 'react'
const ease = [0, .48, .22, .98]

const parentVartiant = {
    hidden: { borderColor: "#D3D3D7", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.05)", backgroundColor: "hsl(0, 0%, 97%)" },
    visible: (delay = 0) => ({
        borderColor: ["#D3D3D7", "hsla(208, 100%, 65%, 1)", "hsla(194, 100%, 50%, 1)"],
        backgroundColor: "#fff",
        boxShadow: [
            "0px 4px 10px rgba(0, 0, 0, 0.05)",
            "0px 8px 20px hsla(208, 100%, 65%, 0.2)"
        ],
        transition: {
            duration: 1,
            ease: ease,
            repeatDelay: 1,
            repeatType: "reverse" as const,
            repeat: 1,
            delay,
        }
    }),
};

const textVariants = {
    hidden: { opacity: 0, },
    visible: (delay = 0) => ({
        opacity: [0,1,1,1,1],
        transition: {
            ease: "easeOut",
            repeatType: "reverse" as const,
            repeatDelay: 1,
            delay,
            repeat: 1,
        }
    }),
};
interface ISolutionBox {
    icon: React.ReactNode
    title: string
    targetAnimation: number[]
    custom: 0 | 1 // delay of animation used when the box is a receiver of the animation fixed to 
    className: string
    currentAnimation: number
    link:string,
}
const LandingSolutionsBox = ({link, icon, targetAnimation, title, custom, className, currentAnimation }: ISolutionBox) => {
    const t = useTranslations()
    const animate = targetAnimation.includes(currentAnimation)
    return (
        <AnimationWrapper isChild >
            <Link href={link} ria-label={link} >
            <motion.div custom={custom} variants={parentVartiant} initial={"hidden"} animate={animate ? "visible" : "hidden"} className={` absolute  w-20 h-20 border rounded-md flex  flex-col items-center justify-center text-[#D3D3D7] group  hover:!text-[#4DACFF]  hover:!border-[#4DACFF]  hover:!shadow-lg hover:!shadow-[#4dacff41]  cursor-pointer ${className}`} >
                {icon}
                <motion.h6 custom={custom} variants={textVariants} initial={"hidden"} animate={animate ? "visible" : "hidden"} className='text-[12px] text-center  h-0 group-hover:!opacity-100 duration-700 text-black'>{t(title)}</motion.h6>
            </motion.div>
            </Link>
        </AnimationWrapper>
    )
}

export default LandingSolutionsBox