import {memo, ComponentProps, ElementType} from 'react';
import {View} from 'react-native';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

type Props<C extends ElementType> = {
  Component?: C;
  children?: React.ReactNode;
} & ComponentProps<C>;

function InputContainerComponent<C extends ElementType>({
  Component,
  children,
  ...rest
}: Props<C>) {
  const {theme} = useTheme();
  const containerStyles = [
    styles.container,
    {backgroundColor: theme.background.layout.tertiary},
  ];

  return (
    <View style={containerStyles}>
      {Component ? <Component {...rest} /> : children}
    </View>
  );
}

const InputContainer = memo(
  InputContainerComponent,
) as typeof InputContainerComponent;

export default InputContainer;