import { DuffelCardFormStyles } from '../../../index';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

interface FormFieldProps {
  label?: string;
  error?: string;
  children: React.ReactNode;
  labelStyles?: DuffelCardFormStyles['label'];
  formFieldStyle: DuffelCardFormStyles['formField'];
  errorMessageStyles: DuffelCardFormStyles['errorMessage'];
}

export const FormField: React.FC<FormFieldProps> = ({
  label,
  error,
  children,
  labelStyles,
  formFieldStyle,
  errorMessageStyles,
}) => {
  return (
    <View style={[defaultStyles.formField, formFieldStyle]}>
      {label && <Text style={[defaultStyles.label, labelStyles]}>{label}</Text>}
      <View>{children}</View>
      <Text
        style={[
          defaultStyles.error,
          !error && defaultStyles.errorInvisible,
          errorMessageStyles,
        ]}
      >
        {error}
      </Text>
    </View>
  );
};

const defaultStyles = StyleSheet.create({
  formField: {
    marginBottom: 10,
  },
  label: {
    fontSize: 14,
    fontWeight: 'bold',
  },
  error: {
    fontSize: 12,
    color: '#CC0000',
  },
  errorInvisible: {
    opacity: 0,
  },
});