import { cn } from '@/lib/utils';

export function PasswordStrength({ password }: { password?: string }) {
  if (!password) return null;

  let score = 0;
  if (password.length >= 8) score++;
  if (/[A-Z]/.test(password)) score++;
  if (/[0-9]/.test(password)) score++;
  if (/[^A-Za-z0-9]/.test(password)) score++;

  const colors = [
    '',
    'bg-rose-500',
    'bg-amber-400',
    'bg-blue-400',
    'bg-emerald-500',
  ];
  const labels = ['', 'Lemah', 'Sedang', 'Kuat', 'Sangat Kuat'];
  const textColors = [
    '',
    'text-rose-400',
    'text-amber-400',
    'text-blue-400',
    'text-emerald-400',
  ];

  return (
    <div className="mt-3">
      <div className="flex gap-1">
        {[1, 2, 3, 4].map((i) => (
          <div
            key={i}
            className={cn(
              'h-0.5 flex-1 rounded-full transition-all duration-300',
              i <= score ? colors[score] : 'bg-gray-200'
            )}
          />
        ))}
      </div>
      <p className="text-[10px] font-bold uppercase tracking-widest mt-1.5 text-gray-600">
        Kekuatan: <span className={textColors[score]}>{labels[score]}</span>
      </p>
    </div>
  );
}