import { useCallback, useEffect, useRef, useState } from "react"; import useEmblaCarousel from "embla-carousel-react"; import Autoplay from "embla-carousel-autoplay"; import { ArrowRight, Bot, ChevronLeft, ChevronRight, Coffee, Flame, Sparkles } from "lucide-react"; import { cn } from "../utils/cn"; import { Reveal, SectionHeading } from "./shared"; import { signatureMixes, strengthLabels, type SignatureMix } from "../data/catalog"; const items = signatureMixes; function MenuCard({ item, index }: { item: SignatureMix; index: number }) { return (
0{index + 1} {item.badge && ( {item.badge.label} )}

{item.name}

{item.desc}

{/* strength */}
Крепость · {strengthLabels[item.strength]} {[1, 2, 3].map((d) => ( ))}
{item.price}
); } export default function MenuCarousel() { const autoplay = useRef( Autoplay({ delay: 5200, stopOnInteraction: false, stopOnMouseEnter: true }) ); const [emblaRef, emblaApi] = useEmblaCarousel( { loop: true, align: "start" }, [autoplay.current] ); const [canPrev, setCanPrev] = useState(true); const [canNext, setCanNext] = useState(true); const prev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]); const next = useCallback(() => emblaApi?.scrollNext(), [emblaApi]); useEffect(() => { if (!emblaApi) return; const update = () => { setCanPrev(emblaApi.canScrollPrev()); setCanNext(emblaApi.canScrollNext()); }; update(); emblaApi.on("select", update); return () => { emblaApi.off("select", update); }; }, [emblaApi]); return (
{/* smoky backdrop */}
Что попробовать } desc="Авторские миксы от наших кальянных мастеров. Не нашёл своё — соберём любой вкус под тебя. Цена единая — без сюрпризов в чеке." />

Кальян от

от 1 400 ₽

1 400 ₽

Авторский чай

Чайник на компанию

350 ₽
{items.map((item, i) => (
))}
); }