import { View } from 'react-native';

import { cn } from '../../lib/cn';
import { Input as UIInput } from '../../ui/input';
import { Text } from '../../ui/text';

import type { InputProps } from './Input.types';

export function Input({
  label,
  helperText,
  error,
  editable = true,
  containerClassName,
  labelClassName,
  inputClassName,
  helperClassName,
  ...props
}: InputProps) {
  return (
    <View className={cn('w-full gap-1', containerClassName)}>
      {label ? (
        <Text className={cn('text-subtitleMedium text-foreground', labelClassName)}>{label}</Text>
      ) : null}
      <UIInput
        editable={editable}
        accessibilityLabel={label}
        className={cn(
          'rounded-[8px] px-2 py-2 text-left h-[48px]',
          error && 'border-danger',
          !editable && 'bg-muted',
          inputClassName,
        )}
        {...props}
      />
      {helperText ? (
        <Text
          className={cn(
            'text-caption',
            error ? 'text-danger' : 'text-muted-foreground',
            helperClassName,
          )}
        >
          {helperText}
        </Text>
      ) : null}
    </View>
  );
}