import { Button, Modal } from 'antd';
import { AppstoreOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';

interface QuizFooterProps {
  current: number;
  total: number;
  onPrev: () => void;
  onNext: () => void;
  onSubmit: () => void;
  onOpenSheet: () => void;
  answeredCount: number;
}

export const QuizFooter = ({ 
  current, 
  total, 
  onPrev, 
  onNext, 
  onSubmit, 
  onOpenSheet,
  answeredCount 
}: QuizFooterProps) => {
  const isFirst = current === 0;
  const isLast = current === total - 1;

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-2 py-2 safe-area-bottom z-30 shadow-[0_-2px_10px_rgba(0,0,0,0.05)]">
      <div className="max-w-md mx-auto flex items-center justify-between">
        <Button 
          type="text" 
          icon={<LeftOutlined />} 
          onClick={onPrev}
          disabled={isFirst}
          className={`flex items-center text-gray-600 hover:text-[#00897B] text-sm ${isFirst ? 'opacity-30' : ''}`}
        >
          上一题
        </Button>

        <div 
          onClick={onOpenSheet}
          className="flex flex-col items-center justify-center -mt-5 bg-white rounded-full h-14 w-14 shadow-lg border border-gray-100 cursor-pointer active:scale-95 transition-transform"
        >
          <AppstoreOutlined className="text-base text-[#00897B] mb-0.5" />
          <span className="text-[12px] text-gray-500">
            {answeredCount}/{total}
          </span>
        </div>

        {isLast ? (
          <Button 
            type="text" 
            onClick={onSubmit}
            className="flex items-center text-[#00897B] font-medium hover:bg-teal-50 text-sm"
          >
            提交 <RightOutlined />
          </Button>
        ) : (
          <Button 
            type="text" 
            onClick={onNext}
            className="flex items-center text-gray-600 hover:text-[#00897B] text-sm"
          >
            下一题 <RightOutlined />
          </Button>
        )}
      </div>
    </div>
  );
};
