'use client';

import { useTranslations } from 'next-intl';
import { ChevronRight } from 'lucide-react';

type RegistrationProgressStepsProps = {
  step: number;
  firstLabel?: string;
  secondLabel?: string;
};

export function RegistrationProgressSteps({
  step,
  firstLabel,
  secondLabel,
}: RegistrationProgressStepsProps) {
  const t = useTranslations('auth');

  return (
    <div className="mb-6 sm:mb-8">
      <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2 sm:flex sm:justify-between">
        <div className="flex items-center min-w-0">
          <div
            className={`w-7 h-7 sm:w-8 sm:h-8 shrink-0 rounded-full flex items-center justify-center text-sm ${
              step >= 1
                ? 'bg-primary text-primary-contrast'
                : 'bg-background-secondary text-text-secondary border border-border'
            }`}
          >
            1
          </div>
          <div
            className={`ml-1.5 sm:ml-2 text-xs sm:text-sm font-medium truncate ${
              step >= 1 ? 'text-primary' : 'text-text-muted'
            }`}
          >
            {firstLabel ?? t('stepAccount')}
          </div>
        </div>
        <ChevronRight className="h-4 w-4 sm:h-5 sm:w-5 text-text-muted icon-flat shrink-0" />
        <div className="flex items-center min-w-0 justify-end sm:justify-start">
          <div
            className={`w-7 h-7 sm:w-8 sm:h-8 shrink-0 rounded-full flex items-center justify-center text-sm ${
              step >= 2
                ? 'bg-primary text-primary-contrast'
                : 'bg-background-secondary text-text-secondary border border-border'
            }`}
          >
            2
          </div>
          <div
            className={`ml-1.5 sm:ml-2 text-xs sm:text-sm font-medium truncate ${
              step >= 2 ? 'text-primary' : 'text-text-muted'
            }`}
          >
            {secondLabel ?? t('stepOrganization')}
          </div>
        </div>
      </div>
    </div>
  );
}
