import React from 'react';
import { View, Text, StyleSheet, TextInput , TextInputProps } from 'react-native';
import { useSettings } from '@/theme';

interface DescriptionInputProps extends TextInputProps {
  error?: string;
}

export function DescriptionInput({ error, ...props }: DescriptionInputProps) {
  const { theme } = useSettings();

  return (
    <View style={styles.container}>
      <Text style={[styles.label, { color: theme.text }]}>Description</Text>
      <TextInput
        style={[
          styles.input,
          { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text },
          error && styles.inputError,
        ]}
        placeholder="Add description..."
        placeholderTextColor={theme.textMuted}
        multiline
        numberOfLines={5}
        maxLength={1000}
        textAlignVertical="top"
        autoCapitalize="sentences"
        {...props}
      />
      <Text style={[styles.charCount, { color: theme.textMuted }]}>
        {props.value?.length || 0}/1000
      </Text>
      {error && <Text style={styles.errorText}>{error}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 5,
  },
  label: {
    fontSize: 13,
    fontWeight: '600',
  },
  input: {
    minHeight: 88,
    padding: 14,
    borderRadius: 10,
    borderWidth: 1,
    fontSize: 14,
  },
  inputError: {
    borderColor: '#E53935',
    borderWidth: 1.5,
  },
  charCount: {
    fontSize: 10,
    textAlign: 'right',
    marginTop: -3,
  },
  errorText: {
    fontSize: 11,
    color: '#E53935',
    marginLeft: 4,
  },
});