import React, { useState } from 'react';
import classNames from 'classnames';
import styles from './index.less';

// 导入背景图
import bgNormal from '@/assets/images/V-2504/url-bg.png';
import bgActive from '@/assets/images/V-2504/url-bg-active.png';
import arrowIcon from '@/assets/images/V-2504/url-arrow.png';

export interface UrlCardProps {
  id: string;
  logoSrc: string;
  titleSrc: string;
  targetUrl: string;
  // isActive?: boolean;
  onClick?: (id: string) => void;
}

const UrlCard: React.FC<UrlCardProps> = ({
  id,
  logoSrc,
  titleSrc,
  targetUrl,
  // isActive = false,
  onClick,
}) => {
  const [isHover, setIsHover] = useState(false);
  const handleClick = () => {
    // 调用onClick传递id
    onClick?.(id);
  };
  const handleMouseEnter =()=>{
    setIsHover(true);
  }
  const handleMouseLeave =()=>{
    setIsHover(false);
  }

  return (
    <div 
      className={classNames(styles.cardContainer, { [styles.active]: isHover })}
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div 
        className={styles.cardBackground}
        style={{ 
          backgroundImage: `url(${isHover ? bgActive : bgNormal})` 
        }}
      >
        <img 
          src={logoSrc} 
          alt="" 
          className={classNames(styles.logo, { [styles.logoActive]: isHover })}
        />
        <img 
          src={titleSrc} 
          alt="" 
          className={styles.title}
        />
        {isHover && (
          <img src={arrowIcon} alt="" className={styles.arrow} />
        )}
      </div>
    </div>
  );
};

export default UrlCard; 