import React from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  type StyleProp,
  type TextInputProps,
  type TextStyle,
  type ViewStyle,
  View,
} from 'react-native';

import { Palette } from '@/constants/palette';
import { FunnelSans } from '@/constants/fonts';
import { Radius, Spacing } from '@/constants/styles';

type InputProps = TextInputProps & {
  label?: string;
  error?: string | null;
  containerStyle?: StyleProp<ViewStyle>;
  inputStyle?: StyleProp<TextStyle>;
};

export function Input({
  label,
  error,
  containerStyle,
  inputStyle,
  ...textInputProps
}: InputProps) {
  return (
    <View style={[styles.container, containerStyle]}>
      {label ? <Text style={styles.label}>{label}</Text> : null}

      <TextInput
        placeholderTextColor={Palette.black}
        style={[styles.input, inputStyle]}
        {...textInputProps}
      />

      {error ? <Text style={styles.error}>{error}</Text> : null}
    </View>
  );
}

export default Input;

const styles = StyleSheet.create({
  container: {
    gap: Spacing.sm,
  },
  label: {
    ...FunnelSans.semiBold14,
    color: Palette.black,
  },
  input: {
    ...FunnelSans.regular16,
    borderWidth: 1,
    borderColor: Palette.gray,
    borderRadius: Radius.lg,
    backgroundColor: Palette.white,
    color: Palette.black,
    paddingHorizontal: Spacing.md,
    paddingVertical: 14,
  },
  error: {
    ...FunnelSans.semiBold14,
    color: Palette.danger,
  },
});