import * as React from 'react'

import { cn } from './utils'

export interface InputProps extends React.ComponentProps<'input'> {
  /** Mark the input as invalid — sets aria-invalid and error styling */
  error?: boolean
  /** ID of the element describing the error — sets aria-errormessage */
  errorMessageId?: string
}

function Input({ className, type, error, errorMessageId, ...props }: InputProps) {
  return (
    <input
      type={type}
      data-slot="input"
      aria-invalid={error || undefined}
      aria-errormessage={error && errorMessageId ? errorMessageId : undefined}
      className={cn(
        'border-border-glass bg-glass text-foreground h-10 w-full min-w-0 rounded-xl border px-4 py-2 text-[13px] backdrop-blur-[20px]',
        'placeholder:text-foreground-muted',
        'transition-all duration-[250ms] outline-none',
        'focus:border-primary focus:shadow-glow',
        'file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium',
        'selection:bg-primary selection:text-primary-foreground',
        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
        'aria-invalid:border-accent-rose aria-invalid:shadow-glow-rose',
        className
      )}
      {...props}
    />
  )
}

export { Input }
