'use client'

import { useState } from 'react'
import { cn } from '@/lib/utils'

interface ShineBorderProps {
  borderRadius?: number
  borderWidth?: number
  duration?: number
  className?: string
  innerClassName?: string
  children: React.ReactNode
}

/**
 * @name Shine Border
 * @description It is an animated background border effect component with easy to use and configurable props.
 * @param borderRadius defines the radius of the border.
 * @param borderWidth defines the width of the border.
 * @param duration defines the animation duration to be applied on the shining border
 * @param color a string or string array to define border color.
 * @param className defines the class name to be applied to the component
 * @param children contains react node elements.
 */
export default function ShineBorder({
  borderRadius = 8,
  borderWidth = 1,
  duration = 14,
  className,
  innerClassName,
  children,
}: ShineBorderProps) {
  const color = ['#B4F4FF', '#CBC2FF', '#BFE9FE']
  const [isIn, setIsIn] = useState(false)
  return (
    <div
      onMouseEnter={() => setIsIn(true)}
      onMouseLeave={() => setIsIn(false)}
      style={
        {
          '--border-radius': `${borderRadius}px`,
        } as React.CSSProperties
      }
      className={cn(
        'relative',
        className,
      )}
    >
      <div
        style={
          {
            'opacity': isIn ? 1 : 0,
            'transition': 'opacity 0.7s',
            '--border-width': `${borderWidth}px`,
            '--border-radius': `${borderRadius}px`,
            '--shine-pulse-duration': `${duration}s`,
            '--mask-linear-gradient': `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
            '--background-radial-gradient': `radial-gradient(transparent,transparent, ${Array.isArray(color) ? color.join(',') : color},transparent,transparent)`,
          } as React.CSSProperties
        }
        className={`before:bg-shine-size before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient] motion-safe:before:animate-[shine-pulse_var(--shine-pulse-duration)_infinite_linear]`}
      >
      </div>
      <div className={`relative z-1 w-full h-full ${innerClassName}`}>
        {children}
      </div>
    </div>
  )
}
