import { type ForwardedRef,forwardRef } from "react"
import { Input as AriaInput, Label as AriaLabel } from "react-aria-components"

import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"

import styles from "./input.module.css"

import type { AriaInputWithLabelProps } from "./input"

const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
  { label, ...props }: AriaInputWithLabelProps,
  ref: ForwardedRef<HTMLInputElement>
) {
  return (
    <AriaLabel className={styles.container} htmlFor={props.name}>
      <Body asChild fontOnly>
        <AriaInput {...props} className={styles.input} ref={ref} />
      </Body>
      <Label required={!!props.required}>{label}</Label>
    </AriaLabel>
  )
})

export default AriaInputWithLabel
