import { forwardRef, type InputHTMLAttributes } from 'react'
import { cv, type VariantProps } from '../../lib/cv.js'
import { formControlBase, formControlState } from './form-control.js'

const input = cv(formControlBase, {
  variants: {
    size: {
      sm: 'py-1.5 text-[length:var(--fs-sub)]',
      md: '',
      lg: 'py-2.5 text-[length:var(--fs-body)]',
    },
    state: {
      default: formControlState.default,
      invalid: formControlState.invalid,
      valid: formControlState.valid,
    },
  },
  defaultVariants: { size: 'md', state: 'default' },
})

export type InputVariants = VariantProps<typeof input>

export interface InputProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, InputVariants {}

export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  { size, state, className, ...rest },
  ref,
) {
  return <input ref={ref} className={input({ size, state, class: className })} {...rest} />
})

export { input as inputVariants, formControlBase, formControlState }
