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')}`;
  };

  const getTimerColor = (seconds: number) => {
    if (seconds < 300) return 'text-red-600 bg-red-50 border-red-100'; // Less than 5 mins
    return 'text-[#008C8C] bg-teal-50 border-teal-100';
  };

  return (
    <div className="bg-white border-b border-gray-200 px-6 h-16 flex items-center justify-between shadow-sm sticky top-0 z-30">
      <div className="flex items-center gap-4">
        <div 
          onClick={onGiveUp}
          className="flex items-center gap-2 cursor-pointer text-gray-600 hover:text-gray-900 transition-colors px-3 py-1.5 rounded-lg hover:bg-gray-100"
        >
          <LeftOutlined />
          <span className="font-medium">退出考试</span>
        </div>
        <div className="h-6 w-px bg-gray-200 hidden sm:block"></div>
        <div className="text-lg font-bold text-gray-800 hidden sm:block truncate max-w-md">
          {taskName || '在线考试'}
        </div>
      </div>

      <div className={`flex items-center gap-2 px-4 py-1.5 rounded-lg border ${timeLeft !== null ? getTimerColor(timeLeft) : ''}`}>
        <ClockCircleOutlined className="text-lg" />
        <span className="text-xl font-mono font-bold tabular-nums">
          {timeLeft !== null ? formatTime(timeLeft) : '--:--'}
        </span>
      </div>
    </div>
  );
};
