'use client' import React, { useEffect, useRef, useCallback, useState } from 'react' import { Carousel, CarouselContent, CarouselItem, useCarousel } from '@/components/atoms/Carrousell' import type { HeroCarrousellCardProps } from '@/types/blocks' import Background from '@/components/atoms/Background' import { Card, CardBody, CardHeader, CardFooter } from '@/components/atoms/Card' import AnimateOnScroll from '@/components/atoms/AnimateOnScroll' import Icon from '@/components/atoms/Icon' import CallToAction from '@/components/molecules/CallToAction' import Typography from '@/components/atoms/Typography' import type { LocaleCode } from '@/config/types' import { cn } from '@/utils/styles' import LayoutContainer from '@/components/atoms/LayoutContainer' import { Pause, Play } from '@phosphor-icons/react' type HeroItem = NonNullable[number] type HeroCard = NonNullable const AUTOPLAY_INTERVAL = 4000 // ─── Tabs Bar ───────────────────────────────────────────────────────────────── const TabsBar = ({ items, selectedIndex, onSelect, children, }: { items: HeroItem[] children: React.ReactNode selectedIndex: number onSelect: (i: number) => void }) => (

{children} {items.map((item, i) => (

))}

) // ─── Static Card ────────────────────────────────────────────────────────────── const StaticCard = ({ card, tagline, locale, }: { card: HeroCard tagline: string | null | undefined locale: LocaleCode }) => ( {tagline && ( )} {card.description && ( )} {(card.ctas?.primary?.ctaLabel || card.ctas?.secondary?.ctaLabel) && ( {card.ctas?.primary?.ctaLabel && ( )} {card.ctas?.secondary?.ctaLabel && ( )} )} ) // ─── Inner Carousel (needs useCarousel inside Carousel context) ─────────────── const InnerCarousel = ({ items, card, locale, activeIndex, onIndexChange, }: { items: HeroItem[] card: HeroCard locale: LocaleCode activeIndex: number onIndexChange: (i: number) => void }) => { const { scrollTo, selectedIndex } = useCarousel() // Keep Embla in sync when activeIndex changes from outside (tab click / timer) useEffect(() => { scrollTo(activeIndex) }, [activeIndex, scrollTo]) // Keep activeIndex in sync when Embla changes (drag / swipe) useEffect(() => { if (selectedIndex !== activeIndex) { onIndexChange(selectedIndex) } }, [selectedIndex]) const activeTagline = items[activeIndex]?.cardTitle?.text ?? null return ( <> {/* Backgrounds */} {items.map((item, i) => (

))} {/* Embla slides (kept for drag/swipe support) */} {items.map((item) => ( ))} {/* Static card */}

) } // ─── Auto Carousel ──────────────────────────────────────────────────────────── const AutoCarousel = ({ items, card, locale, }: { items: HeroItem[] card: HeroCard locale: LocaleCode }) => { const [activeIndex, setActiveIndex] = useState(0) const [isPaused, setIsPaused] = useState(false) const [progress, setProgress] = useState(0) const isPausedRef = useRef(false) const timerRef = useRef | null>(null) const progressTimerRef = useRef | null>(null) const remainingRef = useRef(AUTOPLAY_INTERVAL) const startedAtRef = useRef(Date.now()) const currentDelayRef = useRef(AUTOPLAY_INTERVAL) const activeIndexRef = useRef(activeIndex) // Keep ref in sync so timer callbacks always have the latest index useEffect(() => { activeIndexRef.current = activeIndex }, [activeIndex]) const stopProgressTimer = useCallback(() => { if (progressTimerRef.current) clearInterval(progressTimerRef.current) }, []) const startProgressTimer = useCallback( (startFrom = 0, cycleDuration = AUTOPLAY_INTERVAL) => { stopProgressTimer() const startTime = Date.now() progressTimerRef.current = setInterval(() => { const elapsed = Date.now() - startTime const newProgress = startFrom + (elapsed / cycleDuration) * (100 - startFrom) if (newProgress >= 100) { setProgress(100) clearInterval(progressTimerRef.current!) } else { setProgress(newProgress) } }, 16) }, [stopProgressTimer], ) const startTimer = useCallback( (delay = AUTOPLAY_INTERVAL) => { if (timerRef.current) clearInterval(timerRef.current) startedAtRef.current = Date.now() currentDelayRef.current = delay timerRef.current = setInterval(() => { const next = (activeIndexRef.current + 1) % items.length setActiveIndex(next) setProgress(0) startProgressTimer(0, AUTOPLAY_INTERVAL) }, delay) const startFrom = ((AUTOPLAY_INTERVAL - delay) / AUTOPLAY_INTERVAL) * 100 startProgressTimer(startFrom, delay) }, [items.length, startProgressTimer], ) const pause = useCallback(() => { if (isPausedRef.current) return if (timerRef.current) clearInterval(timerRef.current) stopProgressTimer() remainingRef.current = currentDelayRef.current - (Date.now() - startedAtRef.current) isPausedRef.current = true setIsPaused(true) }, [stopProgressTimer]) const resume = useCallback(() => { isPausedRef.current = false setIsPaused(false) startTimer(remainingRef.current) }, [startTimer]) const goTo = useCallback( (i: number) => { stopProgressTimer() isPausedRef.current = false setIsPaused(false) setProgress(0) setActiveIndex(i) startTimer(AUTOPLAY_INTERVAL) }, [startTimer, stopProgressTimer], ) // Start timer on mount useEffect(() => { startTimer() return () => { if (timerRef.current) clearInterval(timerRef.current) stopProgressTimer() } }, []) return (

{/* Progress bar */}

) } // ─── Root ───────────────────────────────────────────────────────────────────── const HeroCarrousellSingleCard = ({ anchorId, items, card, locale }: HeroCarrousellCardProps) => { if (!items?.length || !card) return null return (

) } export default HeroCarrousellSingleCard

Block Bank

hero

stable

Hero Carrousell Single Card

Hero

Card

SingleCard

Carrousell

ShadCN

Slides