import type { JSX, Ref } from 'preact';
import { cn } from './cn';

export type InputProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
  value?: string | number;
  compact?: boolean;
  inputRef?: Ref<HTMLInputElement>;
};

export function Input({ className, compact = false, inputRef, ...props }: InputProps) {
  return (
    <input
      ref={inputRef}
      data-asuka-control="input"
      data-asuka-control-size={compact ? 'compact' : 'default'}
      className={cn(
        'ask-theme-input ask-w-full ask-border',
        compact
          ? 'ask-h-8 ask-rounded-lg ask-px-2.5 ask-text-[12px]'
          : 'ask-h-9 ask-rounded-[12px] ask-px-3 ask-text-[13px]',
        className,
      )}
      {...props}
    />
  );
}
