import {  Reel,  ReelContent,  ReelControls,  ReelFooter,  ReelMuteButton,  ReelNavigation,  ReelPlayButton,  ReelProgress,  type ReelItem,} from "@/components/kibo-ui/reel/index"const stories: ReelItem[] = [  { id: "morning", type: "image", src: "", duration: 5, title: "Golden hour" },  { id: "evening", type: "image", src: "", duration: 5, title: "Mountain air" },  { id: "coast", type: "image", src: "", duration: 5, title: "By the water" },]export default function ReelDemo() {  return (    <Reel className="h-[380px] rounded-xl" data={stories} defaultPlaying={false}>      <ReelProgress />      <ReelContent>        {(item) => (          <div            className={`absolute inset-0 flex items-center justify-center ${              item.id === "morning"                ? "bg-gradient-to-br from-amber-300 via-orange-500 to-violet-800"                : item.id === "evening"                  ? "bg-gradient-to-b from-slate-900 via-blue-800 to-cyan-500"                  : "bg-gradient-to-b from-cyan-200 via-sky-500 to-teal-800"            }`}          >            <div className="size-36 rounded-full bg-white/30 blur-2xl" />          </div>        )}      </ReelContent>      <ReelNavigation />      <ReelFooter>        <p className="text-sm font-medium text-white">A few moments from today</p>      </ReelFooter>      <ReelControls className="justify-end gap-1">        <ReelPlayButton />        <ReelMuteButton />      </ReelControls>    </Reel>  )}