import React from "react";
import { Text, View } from "react-native";

import { Input as MinuitInput } from "../Input";
import { BaseButton as MinuitButton } from "../Button";
import Overlay from "../Overlay";

import { Fonts, Palette, gutters } from "../../styles";
import Style from "../../styles/Style";

export const Container = ({ visible, setVisible = () => null, children }) => {
  return (
    <Overlay isVisible={visible}>
      <View style={{ ...Style.containerModal }}>{children}</View>
    </Overlay>
  );
};

export const Title = ({ children }) => {
  return (
    <Text
      style={{
        ...Fonts({
          type: "title",
          style: {
            textAlign: "center",
            marginBottom: gutters,
          },
        }),
      }}
    >
      {children}
    </Text>
  );
};

export const Description = ({ children }) => {
  return (
    <Text
      style={{
        ...Fonts({
          type: "default",
          style: {
            textAlign: "center",
            marginBottom: gutters / 2,
          },
        }),
      }}
    >
      {children}
    </Text>
  );
};

export const Button = ({
  label,
  onPress,
  type = "primary",
  containerStyle = {},
}) => {
  return (
    <MinuitButton
      containerStyle={{
        width: "100%",
        alignSelf: "center",
        ...containerStyle,
      }}
      text={label}
      onPress={onPress}
      type={type}
    />
  );
};

export const Input = (props) => {
  return <MinuitInput {...props} setValue={props.onChangeText} />;
};
