import React from 'react';
import { cn } from './utils';

interface HoverShineOverlayProps {
  /** Additional classes to merge */
  className?: string;
  /** Tailwind gradient via color, e.g. "via-white/10" */
  shineColor?: string;
  /** Hover trigger prefix, usually "group-hover:" */
  hoverPrefix?: string;
}

export function HoverShineOverlay({ 
  className, 
  shineColor = 'via-white/10',
  hoverPrefix = 'group-hover:'
}: HoverShineOverlayProps) {
  
  // Tailwind JIT cannot parse dynamic strings like `${prefix}left-[100%]`. 
  // We must provide literal strings for the compiler.
  const hoverClass = hoverPrefix === 'peer-hover:' 
    ? 'peer-hover:left-[100%]' 
    : 'group-hover:left-[100%]';

  return (
    <div 
      className={cn(
        "absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none",
        hoverClass,
        shineColor,
        className
      )} 
    />
  );
}