'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { PageHeader } from '@/components';
import { ROUTES } from '@/constants';
import type { StepGroupKey } from './verificationSteps';
import { groupLabelKey } from './verificationSteps';

export interface VerificationJourneyHeaderProps {
  /** Which journey group this screen submits (or `'review'` for the B6 status screen) — drives the title. */
  group: StepGroupKey | 'review';
}

/**
 * The ONE progress answer B4/B5/B6 share (ui-phase-8 §3.2) — replaces the competing bare 3-step
 * `StepperHeader` each of those screens used to render alongside the B3 hub's own "X از Y" meter.
 * Just the group name + a "بازگشت به مسیر تأیید" back link into the B3 hub, which is the single
 * place progress is now shown.
 * @component VerificationJourneyHeader
 */
const VerificationJourneyHeader: FunctionComponent<VerificationJourneyHeaderProps> = ({ group }) => {
  const t = useTranslations('verification');
  const locale = useLocale();
  return (
    <PageHeader
      title={t(groupLabelKey(group))}
      backTo={`/${locale}${ROUTES.NURSE_VERIFICATION}`}
      backLabel={t('journey_back')}
    />
  );
};

export default VerificationJourneyHeader;
