import React from 'react';
import { useTranslation } from 'react-i18next';
import type { PasswordStrength } from './usePasswordStrength';

export interface PasswordStrengthMeterProps {
  strength: PasswordStrength;
}

const BAR_WIDTH: Record<Exclude<PasswordStrength, null>, string> = {
  weak: 'w-1/3 bg-destructive',
  medium: 'w-2/3 bg-[var(--chart-3)]',
  strong: 'w-full bg-[var(--chart-2)]',
};

const TEXT_COLOR: Record<Exclude<PasswordStrength, null>, string> = {
  weak: 'text-destructive',
  medium: 'text-[var(--chart-3)]',
  strong: 'text-[var(--chart-2)]',
};

const LABEL_KEY: Record<Exclude<PasswordStrength, null>, string> = {
  weak: 'resetPassword.strengthWeak',
  medium: 'resetPassword.strengthMedium',
  strong: 'resetPassword.strengthStrong',
};

/** Progress bar + label shown under the new-password field on reset/create-password screens. */
export function PasswordStrengthMeter({ strength }: PasswordStrengthMeterProps) {
  const { t } = useTranslation();

  if (!strength) return null;

  return (
    <div className="flex items-center gap-2">
      <div className="flex-1 h-1 bg-muted rounded-full overflow-hidden">
        <div className={`h-full transition-all duration-300 ${BAR_WIDTH[strength]}`} />
      </div>
      <span className={`text-small ${TEXT_COLOR[strength]}`}>{t(LABEL_KEY[strength])}</span>
    </div>
  );
}