// src/components/ui/Input.tsx
// Input: standard HTML input attributes + iconLeft slot
// Output: styled text input with focus ring
// Rationale: consistent form input across filter bars and search

import { cn } from '@/lib/utils'

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  iconLeft?: React.ReactNode
}

export function Input({ iconLeft, className, ...props }: InputProps) {
  return (
    <div className="relative">
      {iconLeft && (
        <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none">
          {iconLeft}
        </span>
      )}
      <input
        className={cn(
          'w-full h-[34px] bg-bg-subtle border border-bg-border rounded-md',
          'text-body text-text-primary placeholder:text-text-muted',
          'focus:border-accent focus:shadow-[0_0_0_2px_rgba(61,184,232,0.1)]',
          'transition-colors duration-fast',
          iconLeft ? 'pl-8 pr-3' : 'px-3',
          className
        )}
        {...props}
      />
    </div>
  )
}