/**
 * FavoriteButton - 通用关注/收藏按钮组件（图标按钮）
 */

import React from 'react';
import { IconButton, Tooltip, Spinner } from '@chakra-ui/react';
import { Star } from 'lucide-react';

export interface FavoriteButtonProps {
  /** 是否已关注 */
  isFavorite: boolean;
  /** 加载状态 */
  isLoading?: boolean;
  /** 点击回调 */
  onClick: () => void;
  /** 按钮大小 */
  size?: 'sm' | 'md' | 'lg';
  /** 颜色主题 */
  colorScheme?: 'gold' | 'default';
  /** 是否显示 tooltip */
  showTooltip?: boolean;
}

// 颜色配置
const COLORS = {
  gold: {
    active: '#F4D03F',    // 已关注 - 亮金色
    inactive: '#C9A961',  // 未关注 - 暗金色
    hoverBg: 'whiteAlpha.100',
  },
  default: {
    active: 'yellow.400',
    inactive: 'gray.400',
    hoverBg: 'gray.100',
  },
};

const FavoriteButton: React.FC<FavoriteButtonProps> = ({
  isFavorite,
  isLoading = false,
  onClick,
  size = 'sm',
  colorScheme = 'gold',
  showTooltip = true,
}) => {
  const colors = COLORS[colorScheme];
  const currentColor = isFavorite ? colors.active : colors.inactive;
  const label = isFavorite ? '取消关注' : '加入自选';

  const iconButton = (
    <IconButton
      aria-label={label}
      icon={
        isLoading ? (
          <Spinner size="sm" color={currentColor} />
        ) : (
          <Star
            size={size === 'sm' ? 18 : size === 'md' ? 20 : 24}
            fill={isFavorite ? currentColor : 'none'}
            stroke={currentColor}
          />
        )
      }
      variant="ghost"
      color={currentColor}
      size={size}
      onClick={onClick}
      isDisabled={isLoading}
      _hover={{ bg: colors.hoverBg }}
    />
  );

  if (showTooltip) {
    return (
      <Tooltip label={label} placement="top">
        {iconButton}
      </Tooltip>
    );
  }

  return iconButton;
};

export default FavoriteButton;