import { Button, Modal } from 'antd';
import { LeftOutlined, EyeOutlined, ClockCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

interface QuizHeaderProps {
  current: number;
  total: number;
  timeLeft: number | null;
  onGiveUp: () => void;
  taskName?: string;
}

export const QuizHeader = ({ current, total, timeLeft, onGiveUp, taskName }: QuizHeaderProps) => {
  const navigate = useNavigate();

  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
  };

  return (
    <div className="bg-[#00897B] text-white px-2 h-10 flex items-center justify-between shadow-md sticky top-0 z-30">
      <div className="flex items-center gap-1" onClick={onGiveUp}>
        <LeftOutlined className="text-sm" />
        <span className="text-xs">返回</span>
      </div>
      
      <div className="flex items-center gap-1 bg-[#00796B] px-1.5 py-0.5 rounded-full text-xs">
        <span>{taskName || '监控中'}</span>
      </div>

      <div className="flex items-center gap-1 text-xs font-medium tabular-nums">
        <ClockCircleOutlined />
        <span>{timeLeft !== null ? formatTime(timeLeft) : '--:--'}</span>
      </div>
    </div>
  );
};
