// shadcn Input — minimal HTML input with theme-aware styles.

import type { InputHTMLAttributes, ReactNode } from 'react'
import { cn } from '../cn'

export const Input = ({ className, type = 'text', ...props }: InputHTMLAttributes<HTMLInputElement>): ReactNode => (
  <input
    type={type}
    data-slot="input"
    className={cn(
      'flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs',
      'transition-[color,box-shadow] outline-none',
      'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium',
      'placeholder:text-muted-foreground',
      'selection:bg-primary selection:text-primary-foreground',
      'dark:bg-input/30',
      'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
      'md:text-sm',
      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
      className,
    )}
    {...props}
  />
)