import React from 'react';
import { View, Text, TextInput, StyleSheet, TextInputProps } from 'react-native';
import { colors, radii, spacing } from '../../theme';
import { useResponsive } from '../../hooks/useResponsive';

interface InputProps extends TextInputProps {
  label: string;
  required?: boolean;
  error?: string;
  hint?: string;
}

export function Input({ label, required, error, hint, style, ...props }: InputProps) {
  const { fontSize } = useResponsive();
  return (
    <View style={styles.container}>
      <Text style={[styles.label, { fontSize: fontSize.body }]}>
        {label}
        {required && <Text style={styles.required}> *</Text>}
      </Text>
      <TextInput
        style={[
          styles.input,
          { fontSize: fontSize.body },
          error ? styles.inputError : null,
          props.multiline && styles.multiline,
          style,
        ]}
        placeholderTextColor={colors.gray[400]}
        {...props}
      />
      {error ? (
        <Text style={styles.error}>{error}</Text>
      ) : hint ? (
        <Text style={styles.hint}>{hint}</Text>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: spacing.lg,
  },
  label: {
    fontWeight: '600',
    color: colors.gray[700],
    marginBottom: spacing.sm,
  },
  required: {
    color: colors.danger[500],
  },
  input: {
    backgroundColor: colors.gray[50],
    borderWidth: 1,
    borderColor: colors.gray[200],
    borderRadius: radii.md,
    paddingHorizontal: spacing.md,
    paddingVertical: 12,
    color: colors.gray[900],
  },
  inputError: {
    borderColor: colors.danger[500],
    backgroundColor: colors.danger[50],
  },
  multiline: {
    minHeight: 100,
    textAlignVertical: 'top',
  },
  error: {
    fontSize: 12,
    color: colors.danger[600],
    marginTop: spacing.xs,
  },
  hint: {
    fontSize: 12,
    color: colors.gray[400],
    marginTop: spacing.xs,
  },
});