'use client'

import { Check, X } from'lucide-react'

const REQUIREMENTS = [
 { label:'Mindestens 8 Zeichen', test: (p: string) => p.length >= 8 },
 { label:'Mindestens ein Großbuchstabe', test: (p: string) => /[A-Z]/.test(p) },
 { label:'Mindestens ein Kleinbuchstabe', test: (p: string) => /[a-z]/.test(p) },
 { label:'Mindestens eine Zahl', test: (p: string) => /[0-9]/.test(p) },
 { label:'Mindestens ein Sonderzeichen (!@#$%^&*)', test: (p: string) => /[!@#$%^&*]/.test(p) },
]

export function allRequirementsMet(password: string): boolean {
 return REQUIREMENTS.every(({ test }) => test(password))
}

export default function PasswordRequirements({ password }: { password: string }) {
 if (!password) return null
 return (
 <ul className="mt-2 space-y-1.5 bg-background border border-border rounded-lg px-3 py-2.5">
 <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-1.5">Passwort-Anforderungen</p>
 {REQUIREMENTS.map(({ label, test }) => {
 const met = test(password)
 return (
 <li key={label} className="flex items-center gap-2 text-xs">
 {met
 ? <Check size={13} className="text-success shrink-0"/>
 : <X size={13} className="text-destructive shrink-0"/>
 }
 <span className={met ?'text-success':'text-destructive'}>{label}</span>
 </li>
 )
 })}
 </ul>
 )
}