"use client";

import { useState } from "react";

function scorePassword(pw: string) {
  let s = 0;
  if (pw.length >= 8) s++;
  if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) s++;
  if (/\d/.test(pw)) s++;
  if (/[^A-Za-z0-9]/.test(pw)) s++;
  return s; // 0..4
}

const LABELS = ["Too short", "Weak", "Fair", "Good", "Strong"];
const COLORS = ["#6B6B66", "#f43f5e", "#f59e0b", "#06b6d4", "#10b981"];

export function PasswordStrengthInput() {
  const [pw, setPw] = useState("");
  const [show, setShow] = useState(false);
  const score = pw ? scorePassword(pw) : 0;

  return (
    <div className="grid min-h-[200px] place-items-center bg-[#F4F3EF] p-12">
      <div className="w-full max-w-xs">
        <label className="mb-2 block font-mono text-[10px] uppercase tracking-[0.16em] text-[#6B6B66]">
          Password
        </label>
        <div className="relative">
          <input
            type={show ? "text" : "password"}
            value={pw}
            onChange={(e) => setPw(e.target.value)}
            placeholder="••••••••"
            className="w-full rounded-lg border border-[#1111111A] bg-[#FAFAF8] py-2.5 pl-3 pr-16 text-[14px] text-[#111111] outline-none focus:border-[#11111144] placeholder:text-[#6B6B66]/60"
          />
          <button
            type="button"
            onClick={() => setShow((v) => !v)}
            className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md px-2 py-1 font-mono text-[10px] uppercase tracking-[0.1em] text-[#6B6B66] hover:text-[#111111]"
          >
            {show ? "Hide" : "Show"}
          </button>
        </div>

        <div className="mt-3 flex gap-1.5">
          {[0, 1, 2, 3].map((i) => (
            <span
              key={i}
              className="h-1.5 flex-1 rounded-full transition-colors duration-300"
              style={{
                backgroundColor: i < score ? COLORS[score] : "#1111111A",
              }}
            />
          ))}
        </div>
        <p
          className="mt-2 font-mono text-[11px] transition-colors"
          style={{ color: pw ? COLORS[score] : "#6B6B66" }}
        >
          {pw ? LABELS[score] : "Use 8+ chars, a number and a symbol"}
        </p>
      </div>
    </div>
  );
}
Password Strength Input
