<script lang="ts">
  import type { ClassValue } from 'svelte/elements';

  const {
    class: className = undefined,
    id,
    name,
    label = 'Password',
    required = false,
  }: {
    class?: ClassValue;
    id: string;
    name: string;
    required?: boolean;
    label?: string;
  } = $props();
</script>

<div class="relative {className ?? ''}">
  <input
    {id}
    type="password"
    {name}
    class="peer w-full min-w-0 rounded bg-gray-200 px-2 py-1.5 text-black"
    placeholder=""
    {required}
  />
  <label
    class="pointer-events-none absolute -top-6 left-0 text-sm transition-[translate,color,font-size] peer-placeholder-shown:translate-x-2 peer-placeholder-shown:translate-y-7.5 peer-placeholder-shown:text-base peer-placeholder-shown:text-black/50 peer-focus:translate-x-0 peer-focus:translate-y-0 peer-focus:text-sm peer-focus:text-white"
    for={id}>{label}</label
  >
</div>