/**
 * Header component for CreateRequest
 */

import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react';

interface CreateRequestHeaderProps {
  isEditing: boolean;
  currentStep: number;
  totalSteps: number;
  stepNames: string[];
  onBack?: () => void;
}

export function CreateRequestHeader({
  isEditing,
  currentStep,
  totalSteps,
  stepNames,
  onBack,
}: CreateRequestHeaderProps) {
  return (
    <div
      className="bg-white border-b border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex-shrink-0"
      data-testid="create-request-header"
    >
      <div className="flex items-center justify-between max-w-6xl mx-auto gap-2 sm:gap-4">
        <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0">
          <Button
            variant="ghost"
            size="icon"
            onClick={onBack}
            className="shrink-0 h-8 w-8 sm:h-10 sm:w-10"
            data-testid="create-request-back-button"
          >
            <ArrowLeft className="h-4 w-4 sm:h-5 sm:w-5" />
          </Button>
          <div className="min-w-0">
            <h1
              className="text-base sm:text-xl md:text-2xl font-bold text-gray-900 truncate"
              data-testid="create-request-title"
            >
              {isEditing ? 'Edit Draft' : 'New Request'}
            </h1>
            <p
              className="text-xs sm:text-sm text-gray-600 hidden sm:block"
              data-testid="create-request-step-info"
            >
              Step {currentStep} of {totalSteps}: {stepNames[currentStep - 1]}
            </p>
          </div>
        </div>
        <div
          className="hidden md:flex items-center gap-4"
          data-testid="create-request-progress-info"
        >
          <div className="text-right">
            <p className="text-sm font-medium text-gray-900">
              {Math.round((currentStep / totalSteps) * 100)}% Complete
            </p>
            <p className="text-xs text-gray-600">
              {totalSteps - currentStep} steps remaining
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

