'use client';
import { useState } from 'react';
import Image from 'next/image';
import { cn } from '@/lib';

type IconProps = {
  src?: string;
  hoverSrc?: string;
  isActive?: boolean;
  activeSrc?: string;
  size?: number;
} & React.HTMLAttributes<HTMLSpanElement>;

export default function Icon({
  src,
  hoverSrc,
  isActive = false,
  activeSrc,
  size = 40,
  className,
  ...rest
}: IconProps) {
  const [isHovered, setIsHovered] = useState(false);

  // 决定显示哪个图片
  const getImageSrc = () => {
    if (isActive && activeSrc) {
      return activeSrc;
    }
    if (isHovered && hoverSrc) {
      return hoverSrc;
    }
    return src || '';
  };

  return (
    <span
      className={cn('hover:cursor-pointer', className)}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      {...rest}
    >
      <Image src={getImageSrc()} alt="icon" width={size} height={size} />
    </span>
  );
}
