import { View, Text, Pressable } from "react-native";
import React from "react";
import { Palette, Style } from "../styles";
import { size } from "../styles/Style";
import { FONT_FAMILY } from "../styles/Fonts";

const AppCheckbox = ({ onPress, selected, label }) => {
  return (
    <Pressable
      style={{
        ...Style.containerRow,
        gap: 6,
      }}
      onPress={onPress}
    >
      <View
        style={{
          ...size({ size: 17 }),
          ...Style.containerCenter,
          borderWidth: 1,
          borderRadius: 100,
          borderColor: Palette.white,
        }}
      >
        {selected && (
          <View
            style={{
              ...size({ size: 9 }),
              borderRadius: 100,
              backgroundColor: Palette.white,
            }}
          />
        )}
      </View>
      <Text
        style={{
          fontSize: 16,
          color: Palette.white,
          fontFamily: FONT_FAMILY.HelveticaNeueRegular,
        }}
      >
        {label}
      </Text>
    </Pressable>
  );
};

export default AppCheckbox;