// Metro module 12485 (f12486).
import { useState, useCallback } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import PremiumPerkCard, { usePerkCardHeight, PerkCardVariant, PERK_CARD_SIZES } from "./PremiumPerkCard";
import { Text } from "../../../design/components/Text/native/Text";
import Carousel from "../../../components_native/common/Carousel";
import { CarouselPagination } from "../../../design/void/native";
const useStyles = createStyles({
  title: {
    marginLeft: 24
  },
  indicators: {
    marginBottom: -36
  },
  carousel: {
    marginTop: 16
  },
  carouselCard: {
    marginLeft: 8
  },
  lastCarouselCard: {
    marginRight: 8
  }
});
export default function PremiumPerkCarousel(props) {
  let length;
  const { title, perks, style, onItemChange } = props;
  length = void 0;
  const styles = useStyles();
  const perkCardHeight = usePerkCardHeight(PerkCardVariant.NARROW);
  const [state, setState] = useState(0);
  const callback = useCallback((a0) => {
    if (a0 !== state) {
      setState(a0);
      if (onItemChange != null) {
        onItemChange(a0);
      }
    }
  }, [state, onItemChange]);
  const width = PERK_CARD_SIZES[PerkCardVariant.NARROW].width;
  length = perks.length;
  return <View style={style}>
    <Text style={styles.title} variant="heading-xl/extrabold" color="mobile-text-heading-primary">{title}</Text>
    <Carousel style={[styles.carousel, {
      height: perkCardHeight + 8
    }]} width={width} onPageChange={callback} pageIndictor={false} scrollViewProps={{
      overScrollMode: "always",
      snapToInterval: width + 8 + 0.2,
      snapToStart: true,
      snapToAlignment: "start",
      decelerationRate: "normal"
    }}>
      {perks.map((perk, index) => <PremiumPerkCard key={index} {...perk} variant={PerkCardVariant.NARROW} style={[styles.carouselCard, length - 1 === index ? styles.lastCarouselCard : null]} />)}
    </Carousel>
    <CarouselPagination containerStyle={styles.indicators} numberOfItems={perks.length} currentIndex={state} />
  </View>;
};