---
const { label = "Phone Number", id } = Astro.props;

interface Props {
  label?: string;
  id: string;
}
---

<div>
  <label for={id} class="sr-only">{label}</label>
  <input
    type="tel"
    name="hs-phone-number"
    id={id}
    class="block w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm text-neutral-700 placeholder:text-neutral-500 focus:border-neutral-200 focus:outline-none focus:ring focus:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-700/30 dark:text-neutral-300 dark:placeholder:text-neutral-400 dark:focus:ring-1"
    placeholder={label}
  />
</div>