import { CardTitle, CardDescription } from "@/components/ui/card";
import { StepStatusBadge } from "./StepStatusBadge";
import { StepValidationStatus } from "@/types";

interface StepHeaderProps {
  activity: string;
  location: string;
  time: string;
  validationStatus: StepValidationStatus;
  pendingStatus: 'validating' | 'rejecting' | null;
}

export function StepHeader({
  activity,
  location,
  time,
  validationStatus,
  pendingStatus
}: StepHeaderProps) {
  return (
    <>
      <div className="flex justify-between">
        <CardTitle className="text-base flex-1">{activity}</CardTitle>
        <div className="flex items-center gap-2">
          <StepStatusBadge
            validationStatus={validationStatus}
            pendingStatus={pendingStatus}
          />
          <span className="text-sm font-medium">{time}</span>
        </div>
      </div>
      <CardDescription>{location}</CardDescription>
    </>
  );
}