import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import React from "react";
import useCartStore from "@/store/cartStore";
import { COLORS } from "@/utils/colors";
import { Ionicons } from "@expo/vector-icons";
import { Link } from "expo-router";

const CardButton = () => {
  const { count } = useCartStore();
  return (
    <Link href="/cart" asChild>
      <TouchableOpacity onPress={() => {}}>
        {count > 0 && (
          <View style={styles.countContainer}>
            <Text style={styles.countText}>{count}</Text>
          </View>
        )}
        <Ionicons name="cart" size={28} color="black" />
      </TouchableOpacity>
    </Link>
  );
};

export default CardButton;

const styles = StyleSheet.create({
  countContainer: {
    position: "absolute",
    right: -10,
    bottom: -5,
    backgroundColor: COLORS.primary,
    borderRadius: 10,
    zIndex: 1,
    width: 20,
    height: 20,
    alignItems: "center",
    justifyContent: "center",
  },
  countText: {
    fontSize: 12,
    fontWeight: "bold",
    color: COLORS.white,
  },
});