import { motion } from "framer-motion";
import ChannelCard from "../ChannelCard";
import { setionTitleVariants } from "@/lib/animations";
// import jow from "@/assets/JOW.png";
// import sky from "@/assets/sky.png";
// import echourou9 from "@/assets/echourou9.png";
// import yassir from "@/assets/yassir.png";
// import bilad from "@/assets/bilad.png";
// import {
// Carousel,
// CarouselContent,
// CarouselItem,
// } from "@/components/ui/carousel";
export default function Snai3iAtTV() {
const jow = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914784/thumbnails/urdtzbwsuq05cw8xyilc.png'
const sky = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914856/thumbnails/dc124qyajcz2yf8qtvem.png'
const echourou9 = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914801/thumbnails/zdorqy3lv4xkhuhg5kuw.png'
const yassir = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914814/thumbnails/qc31fho6uaxy9knmdigz.png'
const bilad = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914834/thumbnails/rfgjf6auifpbnqwozpy3.png'
return (
<>
<section className="">
<div className="flex-col gap-12 flex content-between items-center justify-between overflow-hidden py-12 px-[1.5rem] lg:px-[3.25rem]">
<motion.h1
variants={setionTitleVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
className="text-secondary font-extrabold mb-8 "
>
Snai3i at TV
</motion.h1>
</div>
<motion.div
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: -30 },
}}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.7, ease: "easeInOut", delay: 0.2 }}
// className='shadow-inner'
className="relative overflow-hidden"
>
{/* <h1 className=" text-secondary text-5xl font-extrabold mx-auto">
Snai3i at TV
</h1> */}
<div className="flex flex-col justify-center items-center gap-16 overflow-auto">
<div className="mg-16 lg:mx-auto scroll-auto">
<div className="flex md:flex-row flex-col gap-6">
<ChannelCard
channelLogoSrc={jow}
altText="JOW RADIO"
youtubeVideoUrl="https://youtu.be/Y8v4cXpHQrM?si=DJANE27frhyWb1ty "
/>
<ChannelCard
channelLogoSrc={sky}
altText="skynewsarabic"
youtubeVideoUrl="https://youtu.be/xSeIVku0i_4?si=FHL9tv_9NJ5787mD"
/>
<ChannelCard
channelLogoSrc={echourou9}
altText="chourou9"
youtubeVideoUrl="https://youtu.be/AWsQwu_sT2w?si=B9w592n0hsNd_JFS"
/>
<ChannelCard
channelLogoSrc={yassir}
altText="Yassir"
youtubeVideoUrl="https://youtu.be/5KP8HtILOmE?si=fBFVsALJbSjpSIBR"
/>
<ChannelCard
channelLogoSrc={bilad}
altText="BiladTV"
youtubeVideoUrl="https://youtu.be/OIIOTaGCeP4?si=go2VnuS705XGz98y"
/>
</div>
</div>
</div>
<div className="absolute top-0 left-0 w-full h-full z-10 pointer-events-none">
<div className="absolute top-0 left-0 bg-gradient-to-l from-transparent to-white w-1/4 h-full"></div>
<div className="absolute top-0 right-0 bg-gradient-to-r from-transparent to-white w-1/4 h-full"></div>
</div>
</motion.div>
{/* <motion.div
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: -30 },
}}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.7, ease: "easeInOut", delay: 0.2 }}
// className='shadow-inner'
className="relative overflow-hidden"
> */}
{/* align: AlignmentOptionType;
axis: AxisOptionType;
container: string | HTMLElement | null;
slides: string | HTMLElement[] | NodeListOf<HTMLElement> | null;
containScroll: ScrollContainOptionType;
direction: DirectionOptionType;
slidesToScroll: SlidesToScrollOptionType;
dragFree: boolean;
dragThreshold: number;
inViewThreshold: SlidesInViewOptionsType;
loop: boolean;
skipSnaps: boolean;
duration: number;
startIndex: number;
watchDrag: DragHandlerOptionType;
watchResize: ResizeHandlerOptionType;
watchSlides: SlidesHandlerOptionType; */}
{/* <Carousel
opts={{
// loop: true,
dragFree: true,
startIndex: 1,
}}
plugins={
[
// Autoplay({
// delay: 2500,
// }),
]
}
>
<CarouselContent className="justify-center items-center xl:px-[6.25rem]">
<CarouselItem className="flex items-center justify-center basis-1/5 xl:basis-1/3 ml-32">
<div className="h-1 w-[500px]"></div>
</CarouselItem>
<CarouselItem className="flex items-center justify-center basis-1/5 xl:basis-1/4 mr-3">
<ChannelCard
channelLogoSrc={jow}
altText="JOW RADIO"
youtubeVideoUrl="https://youtu.be/Y8v4cXpHQrM?si=DJANE27frhyWb1ty "
/>
</CarouselItem>
<CarouselItem className="flex items-center justify-center basis-1/5 xl:basis-1/4 mr-3">
<ChannelCard
channelLogoSrc={sky}
altText="skynewsarabic"
youtubeVideoUrl="https://youtu.be/xSeIVku0i_4?si=FHL9tv_9NJ5787mD"
/>
</CarouselItem>
<CarouselItem className="flex items-center justify-center basis-1/5 xl:basis-1/4 mr-3 ">
<ChannelCard
channelLogoSrc={echourou9}
altText="chourou9"
youtubeVideoUrl="https://youtu.be/AWsQwu_sT2w?si=B9w592n0hsNd_JFS"
/>
</CarouselItem>
<CarouselItem className="flex items-center justify-center basis-1/5 xl:basis-1/4 mr-3 ">
<ChannelCard
channelLogoSrc={yassir}
altText="Yassir"
youtubeVideoUrl="https://youtu.be/5KP8HtILOmE?si=fBFVsALJbSjpSIBR"
/>
</CarouselItem>
<CarouselItem className="flex items-center justify-center basis-1/5 xl:basis-1/4 mr-3 ">
<ChannelCard
channelLogoSrc={bilad}
altText="BiladTV"
youtubeVideoUrl="https://youtu.be/OIIOTaGCeP4?si=go2VnuS705XGz98y"
/>
</CarouselItem>
<CarouselItem className="flex items-center justify-center basis-1/5 xl:basis-1/12"></CarouselItem>
</CarouselContent>
</Carousel>
<div className="absolute top-0 left-0 w-full h-full z-10 pointer-events-none">
<div className="absolute top-0 left-0 bg-gradient-to-l from-transparent to-white w-1/4 h-full"></div>
<div className="absolute top-0 right-0 bg-gradient-to-r from-transparent to-white w-1/4 h-full"></div>
</div>
</motion.div> */}
</section>
</>
);
}