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) {
  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",
        `${hoverPrefix}left-[100%]`,
        shineColor,
        className
      )} 
    />
  );
}