<script setup lang="ts">
const props = defineProps<{ password: string }>()

const requirements = computed(() => [
  { label: 'Minimaal 8 tekens', met: props.password.length >= 8 },
  { label: 'Een hoofdletter', met: /[A-Z]/.test(props.password) },
  { label: 'Een kleine letter', met: /[a-z]/.test(props.password) },
  { label: 'Een cijfer', met: /[0-9]/.test(props.password) },
])

const allMet = computed(() => requirements.value.every(r => r.met))

defineExpose({ allMet })
</script>

<template>
  <div class="text-body-2 mt-2">
    <div
      v-for="req in requirements"
      :key="req.label"
      :class="req.met ? 'text-success' : 'text-medium-emphasis'"
      class="d-flex align-center gap-1 mb-1"
    >
      <VIcon
        :icon="req.met ? 'tabler-check' : 'tabler-x'"
        size="14"
      />
      <span>{{ req.label }}</span>
    </div>
  </div>
</template>
