import { INPUT_CLASS } from './tokens'

// Text input
export function Input({ className = '', ...props }) {
  return (
    <div className={`${INPUT_CLASS} ${className}`}>
      <input
        className="flex-1 bg-transparent outline-none text-[13px] text-slate-700 placeholder-slate-400 min-w-0"
        {...props}
      />
    </div>
  )
}

// Native <select> wrapper
export function Select({ children, className = '', ...props }) {
  return (
    <div className={`${INPUT_CLASS} ${className}`}>
      <select
        className="flex-1 bg-transparent outline-none text-[13px] text-slate-700 cursor-pointer min-w-0"
        {...props}
      >
        {children}
      </select>
    </div>
  )
}

// Date input
export function DateInput({ label, icon: Icon, className = '', ...props }) {
  return (
    <label className={`${INPUT_CLASS} cursor-pointer ${className}`}>
      {Icon && <Icon className="h-3.5 w-3.5 text-slate-400 flex-shrink-0" />}
      {label && (
        <span className="text-[11px] font-medium uppercase tracking-wider text-slate-400 flex-shrink-0">
          {label}
        </span>
      )}
      <input
        type="date"
        className="bg-transparent outline-none text-[13px] text-slate-700 font-normal min-w-0"
        {...props}
      />
    </label>
  )
}

// Labelled text input with optional leading icon
export function LabelledInput({ label, icon: Icon, className = '', ...props }) {
  return (
    <div className={`${INPUT_CLASS} ${className}`}>
      {Icon && <Icon className="h-3.5 w-3.5 text-slate-400 flex-shrink-0" />}
      {label && (
        <span className="text-[11px] font-medium uppercase tracking-wider text-slate-400 flex-shrink-0">
          {label}
        </span>
      )}
      <input
        className="flex-1 bg-transparent outline-none text-[13px] text-slate-700 placeholder-slate-400 min-w-0"
        {...props}
      />
    </div>
  )
}
