import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ChevronLeft, ArrowLeft } from 'lucide-react';

interface BackButtonProps {
  /** 返回按钮的样式变体 */
  variant?: 'icon' | 'button' | 'text';
  /** 自定义返回逻辑，如果不提供则使用navigate(-1) */
  onBack?: () => void;
  /** 按钮文本，仅在button和text变体时使用 */
  text?: string;
  /** 自定义CSS类名 */
  className?: string;
  /** 图标大小 */
  iconSize?: number;
  /** 是否显示图标 */
  showIcon?: boolean;
  /** 自定义图标 */
  icon?: React.ReactNode;
}

/**
 * 通用返回上一页按钮组件
 * 使用React Router的navigate方法实现返回功能
 */
export const BackButton: React.FC<BackButtonProps> = ({
  variant = 'icon',
  onBack,
  text = '返回',
  className = '',
  iconSize = 6,
  showIcon = true,
  icon
}) => {
  const navigate = useNavigate();

  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      navigate(-1);
    }
  };

  const defaultIcon = variant === 'icon' ? (
    <ChevronLeft className={`h-${iconSize} w-${iconSize}`} />
  ) : (
    <ArrowLeft className={`h-${iconSize} w-${iconSize}`} />
  );

  const buttonIcon = icon || (showIcon ? defaultIcon : null);

  switch (variant) {
    case 'icon':
      return (
        <button
          onClick={handleBack}
          className={`p-2 hover:bg-gray-100 rounded-lg transition-colors ${className}`}
          title="返回上一页"
        >
          {buttonIcon}
        </button>
      );

    case 'button':
      return (
        <button
          onClick={handleBack}
          className={`flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors ${className}`}
        >
          {buttonIcon}
          {text}
        </button>
      );

    case 'text':
      return (
        <button
          onClick={handleBack}
          className={`flex items-center gap-2 text-blue-600 hover:text-blue-700 transition-colors ${className}`}
        >
          {buttonIcon}
          {text}
        </button>
      );

    default:
      return null;
  }
};

export default BackButton;