import type { InputHTMLAttributes, Ref } from 'react';

import { cn } from '../lib/cn';

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  invalid?: boolean;
  ref?: Ref<HTMLInputElement>;
}

export function Input({ className, invalid, ...props }: InputProps) {
  return (
    <input
      aria-invalid={invalid || undefined}
      className={cn(
        'border-ink-300 text-ink-950 h-11 w-full border bg-white px-4 text-sm transition-colors',
        'placeholder:text-ink-400 focus:border-ink-950 focus:outline-none',
        'disabled:bg-ink-50 disabled:cursor-not-allowed',
        invalid && 'border-danger focus:border-danger',
        className,
      )}
      {...props}
    />
  );
}