import React from 'react';
import { useIsMobile } from '@/client/hooks/use-mobile';

interface TradePanelProps {
  hasBought: boolean;
  onToggleTrade: (type: 'BUY' | 'SELL') => void;
  isMobile?: boolean;
}

export const TradePanel: React.FC<TradePanelProps> = ({
  hasBought,
  onToggleTrade,
  isMobile,
}: TradePanelProps) => {
  // 使用统一的移动端检测Hook
  const isMobileHook = useIsMobile();
  const mobile = isMobile !== undefined ? isMobile : isMobileHook;

  // 移动端按钮样式
  const mobileButtonClass = mobile
    ? "px-8 py-4 text-base font-medium text-white rounded-lg hover:opacity-90 focus:outline-none transition-all min-h-[44px] min-w-[80px]"
    : "px-6 py-2 text-sm font-medium text-white rounded-md hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors";

  const buyButtonClass = `${mobileButtonClass} ${hasBought ? 'opacity-50 cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 focus:ring-red-500'}`;
  const sellButtonClass = `${mobileButtonClass} ${!hasBought ? 'opacity-50 cursor-not-allowed' : 'bg-green-600 hover:bg-green-700 focus:ring-green-500'}`;

  return (
    <div className={`flex items-center justify-center ${mobile ? 'p-2' : 'p-4'} bg-gray-800 rounded-lg shadow-lg`}>
      <div className={`flex ${mobile ? 'space-x-3' : 'space-x-4'}`}>
        <button
          onClick={() => !hasBought && onToggleTrade('BUY')}
          disabled={hasBought}
          className={buyButtonClass}
        >
          买入
        </button>
        <button
          onClick={() => hasBought && onToggleTrade('SELL')}
          disabled={!hasBought}
          className={sellButtonClass}
        >
          卖出
        </button>
      </div>
    </div>
  );
}; 