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

import { Ionicons } from "@expo/vector-icons";

import { Colors, Spacing } from "../constants/theme";

type QuickActionProps = {
  title: string;
  icon: any;
  onPress?: () => void;
};

export default function QuickAction({
  title,
  icon,
  onPress,
}: QuickActionProps) {
  const theme = Colors.light;

  return (
    <Pressable
      style={[
        styles.container,
        {
          backgroundColor: theme.backgroundElement,
        },
      ]}
      onPress={onPress}
    >
      <View style={styles.iconContainer}>
        <Ionicons
          name={icon}
          size={30}
          color="#0E8A61"
        />
      </View>

      <Text
        style={[
          styles.title,
          {
            color: theme.text,
          },
        ]}
      >
        {title}
      </Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 150,

    paddingVertical: 20,
    paddingHorizontal: 12,

    borderRadius: 18,

    alignItems: "center",
    justifyContent: "center",
  },

  iconContainer: {
    marginBottom: Spacing.two,
  },

  title: {
    fontSize: 14,
    fontWeight: "600",
    textAlign: "center",
  },
});