import React from 'react'
import { cn } from '../lib/utils'
import { p } from './my-text'

interface pInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  topLabel?: string
  fullWidth?: boolean
  shrunkPadding?: boolean
  error?: boolean
  multiline?: boolean
  numberOfLines?: number
  style?: React.CSSProperties
}

export function pInput({
  topLabel,
  fullWidth = true,
  shrunkPadding = false,
  error,
  multiline,
  className,
  style,
  ...props
}: pInputProps) {
  const inputClasses = cn(
    'flex w-full rounded-md border border-input bg-background px-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
    shrunkPadding ? 'py-1.5' : 'py-2',
    error && 'border-destructive',
    className
  )

  const Tag = multiline ? 'textarea' : 'input'

  return (
    <div style={{ ...(fullWidth ? { width: '100%' } : {}), ...style }}>
      {topLabel && (
        <p weight="medium" className="mb-1 text-sm text-gray-500">
          {topLabel}
        </p>
      )}
      {multiline ? (
        <textarea
          className={inputClasses}
          rows={props.numberOfLines || 3}
          {...(props as any)}
        />
      ) : (
        <input className={inputClasses} {...props} />
      )}
    </div>
  )
}