import * as React from 'react';
import { View } from 'react-native';

import { enhanceTextStyle } from '~/utils/styles';

import { LineBehindProps } from './line-behind.props';
import { DEFAULT_COLOR, lineBehindStyles as styles } from './line-behind.styles';

/**
 * Component that draw a line behind a component
 *
 * @param {string} color Color of the line
 * @param {string} backgroundColor Background color for the whole component
 * @param {ReactNode} children Component to draw a line behind
 * @param {ViewStyle} style Optional style override for the root view.
 */
export const LineBehind: React.FC<LineBehindProps> = (props) => {
  const { children, color, style: styleOverride } = props;

  const style = enhanceTextStyle([styles.container, styleOverride]);
  const lineStyle = enhanceTextStyle([styles.line, { borderBottomColor: color }]);
  const contentSyle = enhanceTextStyle([styles.content]);

  return (
    <View style={style}>
      <View style={lineStyle} />
      <View style={contentSyle}>{children}</View>
      <View style={lineStyle} />
    </View>
  );
};

LineBehind.defaultProps = {
  color: DEFAULT_COLOR,
};
