import React, { CSSProperties, FC } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Linking,
  StyleProp,
  ViewStyle,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

const styles: StyleProp<ViewStyle> = {
  padding: 10,
  flexDirection: "row",
  borderColor: "white",
  borderWidth: 1,
  margin: 10,
  borderRadius: 5,
  alignItems: "center",
  backgroundColor: "#0099CC",
};
export const BottomButtons: FC<{ onCapture: () => void }> = ({ onCapture }) => {
  return (
    <View
      style={{
        padding: 10,
        backgroundColor: "#0099CC",
        flexDirection: "row",
        justifyContent: "space-between",
      }}
    >
      <TouchableOpacity
        style={{ ...styles, flex: 1 }}
        onPress={() => Linking.openURL("https://mstdn.y-zu.org/@JRSTraInfoEX")}
      >
        <MaterialCommunityIcons name="mastodon" color="white" size={30} />
        <View style={{ flex: 1 }} />
        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
          MastodonBOT
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>

      <TouchableOpacity style={styles} onPress={onCapture}>
        <MaterialCommunityIcons name="share-variant" color="white" size={30} />
      </TouchableOpacity>
    </View>
  );
};