import React from 'react';
import { StyleSheet, TextInput, TextInputProps, Text, View } from 'react-native';
import { COLORS, BORDER_RADIUS, FONT_SIZES } from '@/constants/theme';

interface InputProps extends Omit<TextInputProps, 'style'> {
  label?: string;
  error?: string;
  containerStyle?: object;
}

export function Input({ label, error, containerStyle, ...props }: InputProps) {
  return (
    <View style={[styles.container, containerStyle]}>
      {label && <Text style={styles.label}>{label}</Text>}
      <TextInput
        style={[
          styles.input,
          error ? { borderColor: COLORS.danger } : null,
        ]}
        placeholderTextColor={COLORS.textMuted}
        {...props}
      />
      {error && <Text style={styles.error}>{error}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  label: {
    color: COLORS.textSecondary,
    fontSize: FONT_SIZES.sm,
    marginBottom: 6,
  },
  input: {
    backgroundColor: COLORS.backgroundLight,
    borderColor: COLORS.border,
    borderWidth: 1,
    borderRadius: BORDER_RADIUS.md,
    padding: 12,
    color: COLORS.text,
    fontSize: FONT_SIZES.md,
  },
  error: {
    color: COLORS.danger,
    fontSize: FONT_SIZES.xs,
    marginTop: 4,
  },
});