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

interface TaskNameInputProps extends TextInputProps {
  error?: string;
}

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

  return (
    <View style={styles.container}>
      <View style={styles.labelRow}>
        <Text style={[styles.label, { color: theme.text }]}>Task Name</Text>
        <Text style={styles.required}>*</Text>
      </View>
      <TextInput
        style={[
          styles.input,
          { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text },
          error && styles.inputError,
        ]}
        placeholder="Task name"
        placeholderTextColor={theme.textMuted}
        maxLength={100}
        autoCapitalize="sentences"
        accessibilityLabel="Task name"
        accessibilityHint="Required field. Enter a name for the task"
        {...props}
      />
      {error && <Text style={styles.errorText}>{error}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 5,
  },
  labelRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  label: {
    fontSize: 13,
    fontWeight: '600',
  },
  required: {
    color: '#E53935',
    fontSize: 13,
    fontWeight: '600',
  },
  input: {
    height: 48,
    paddingHorizontal: 14,
    borderRadius: 10,
    borderWidth: 1,
    fontSize: 15,
  },
  inputError: {
    borderColor: '#E53935',
    borderWidth: 1.5,
  },
  errorText: {
    fontSize: 11,
    color: '#E53935',
    marginLeft: 4,
  },
});