import * as React from "react";
import { View, TouchableOpacity } from "react-native";
import Typography from "../ui/typography";
import { useSiteSettings } from "../../providers/site";
import { useThemeProvider } from "../../providers/theme-provider";

type Props = {
  onPress: () => void;
};

function CloseModalButton({ onPress }: Props) {
  const { style: siteStyle } = useSiteSettings();
  const {
    theme: { spacing },
  } = useThemeProvider();
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <View
        style={{
          width: "100%",
          padding: spacing[4],
          backgroundColor: siteStyle.title_background_color,
        }}
      >
        <Typography align="center" variant="title4" color={"white"}>
          CLOSE
        </Typography>
      </View>
    </TouchableOpacity>
  );
}

export default CloseModalButton;