import { View } from "react-native";
import { Motion } from "@legendapp/motion";

import { Palette } from "../styles";

export default ({
  carouselRef = null,
  selectedIndex,
  length,
  containerStyle = {},
}) => {
  return (
    <View style={{ flexDirection: "row", ...containerStyle }}>
      {Array.from({ length }).map((_, index) => (
        <Motion.Pressable
          key={index}
          onPress={() => {
            if (carouselRef?.current && index !== selectedIndex) {
              console.log("scroll to", index);
              carouselRef.current.scrollTo({ index });
            }
          }}
          style={{
            width: 10,
            height: 10,
            borderRadius: 5,
            backgroundColor:
              index === selectedIndex
                ? Palette.primary
                : Palette.ultraLightWhite,
            marginHorizontal: 5,
          }}
          animate={{
            width: index === selectedIndex ? 20 : 10,
          }}
        />
      ))}
    </View>
  );
};