---
export interface Props {
  for?: string;
  class?: string;
}

const { for: htmlFor, class: className = "", ...rest } = Astro.props;

const classes = ["form-label", className].filter(Boolean).join(" ");
---

<label class={classes} for={htmlFor} {...rest}>
  <slot />
</label>

<style>
  .form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
  }
</style>