import React from 'react';
import { Badge } from "@nutui/nutui-react-taro";
import { Cart } from "@nutui/icons-react-taro";
import Taro from '@tarojs/taro';
import { useCart } from "@/hooks/useCart";

interface CartIconProps {
  style?: React.CSSProperties;
  className?: string;
  size?: number;
  showBadge?: boolean;
  onClick?: () => void;
}

const CartIcon: React.FC<CartIconProps> = ({
  style,
  className = '',
  size = 16,
  showBadge = true,
  onClick
}) => {
  const { cartCount } = useCart();

  const handleClick = () => {
    if (onClick) {
      onClick();
    } else {
      // 默认跳转到购物车页面
      Taro.switchTab({ url: '/pages/cart/cart' });
    }
  };

  if (showBadge) {
    return (
      <div 
        className={className}
        style={style}
        onClick={handleClick}
      >
        <Badge value={cartCount} top="-2" right="2">
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Cart size={size} />
          </div>
        </Badge>
      </div>
    );
  }

  return (
    <div 
      className={className}
      style={style}
      onClick={handleClick}
    >
      <Cart size={size} />
    </div>
  );
};

export default CartIcon;