import { cx } from "class-variance-authority"
import { type ForwardedRef, forwardRef, useId } 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>
) {
  const uniqueId = useId()
  const inputId = `${uniqueId}-${props.name}`

  return (
    <AriaLabel className={styles.container} htmlFor={inputId}>
      <Body asChild fontOnly>
        <AriaInput
          {...props}
          className={cx(styles.input, props.className)}
          ref={ref}
          id={inputId}
        />
      </Body>
      <Label required={!!props.required}>{label}</Label>
    </AriaLabel>
  )
})

export default AriaInputWithLabel
