'use client'
import { Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react'
import Link from 'next/link';
import React, { useRef } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/free-mode";
import { FreeMode, Navigation } from 'swiper/modules';

export default function Headline() {

    const sliderRef = useRef(null);


    const headlineData = [
        {
            id: 1,
            date: '03/02/2024 15:45 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/headline1.png',
            link: '/link2',
        },
        {
            id: 2,
            date: '03/02/2024 15:45 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/headline2.png',
            link: '/link2',
        },
        {
            id: 3,
            date: '03/02/2024 15:45 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/headline3.png',
            link: '/link2',
        },
        {
            id: 4,
            date: '03/02/2024 15:45 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/headline4.png',
            link: '/link2',
        },
        {
            id: 5,
            date: '03/02/2024 15:45 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/headline5.png',
            link: '/link2',
        },

    ];

    return (
        <div className='space-y-5 pt-10 pb-10 bg-[#F1F4FE]'>
            <div className='lg:mx-16 space-y-4'>
                <div className='text-3xl font-bold z-10 text-black'>Headline News</div>
                <div className="flex w-full flex-col">
                    <Tabs
                        aria-label="Options"
                        size='lg'
                        color='primary'
                        className='pb-5 pt-4'
                        radius='full'
                        disabledKeys={["audio", "foto", "teks"]}
                    >
                        <Tab key="audiovisual" title="Audio Visual">
                            <Swiper ref={sliderRef}
                                breakpoints={{
                                    450: {
                                        slidesPerView: 1,
                                        spaceBetween: 5,
                                    },
                                    700: {
                                        slidesPerView: 2,
                                        spaceBetween: 15,
                                    },
                                    900: {
                                        slidesPerView: 4,
                                        spaceBetween: 15,
                                    },
                                }}
                                freeMode={true}
                                navigation={true}
                                modules={[FreeMode, Navigation]}
                                className="max-w-[90%] w-4/5 lg:w-full ml-2 mr-2"
                            >
                                {headlineData.map((item) => (
                                    <SwiperSlide key={item.title}>
                                        <div className="flex flex-col relative  overflow-hidden cursor-pointer rounded-lg ">
                                            <Card>
                                                <CardBody className="items-center">
                                                    <Image
                                                        shadow="sm"
                                                        radius="lg"
                                                        alt={item.title}
                                                        className="w-full object-cover"
                                                        src={item.imageUrl}
                                                    />
                                                </CardBody>
                                                <CardFooter className="text-small text-left flex flex-col items-start">
                                                    <div >{item.date}</div>
                                                    <div className='font-bold'>{item.title}</div>
                                                    <Link href={`/headline/detail/${item.id}`}>
                                                        <p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
                                                    </Link>
                                                </CardFooter>
                                            </Card>
                                        </div>
                                    </SwiperSlide>
                                ))}
                            </Swiper>

                            {/* <div className="gap-2 grid grid-cols-2 sm:grid-cols-5">
                                    {headlineData.map((item, index) => (
                                        <Card shadow="sm" key={index}>
                                            <CardBody className="overflow-visible p-0">
                                                <Image
                                                    shadow="sm"
                                                    radius="lg"
                                                    width="100%"
                                                    alt={item.title}
                                                    className="w-full object-cover "
                                                    src={item.imageUrl}
                                                />
                                            </CardBody>
                                            <CardFooter className="text-small text-left flex flex-col items-start">
                                                <div >{item.date}</div>
                                                <div className='font-bold'>{item.title}</div>
                                                <Link href={`/headline/detail/${item.id}`}>
                                                    <p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
                                                </Link>
                                            </CardFooter>
                                        </Card>
                                    ))}
                                </div> */}
                        </Tab>
                        <Tab key="audio" title="Audio">
                            <div className='flex justify-center gap-4'>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className=' font-semibold text-[#1A328E] cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                            </div>
                        </Tab>
                        <Tab key="foto" title="Foto">
                            <div className='flex justify-center gap-4'>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                            </div>
                        </Tab>
                        <Tab key="teks" title="Teks">
                            <div className='flex justify-center gap-4'>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                                <Card className='max-h-max w-[250px] items-center rounded-lg'>
                                    <CardBody>
                                        <Image
                                            alt='visimisi'
                                            className='rounded-lg'
                                            src="/vm1.jpg"
                                            height={150}
                                            width={220}
                                        />
                                    </CardBody>
                                    <div className='px-3 pb-2'>
                                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
                                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
                                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
                                    </div>
                                </Card>
                            </div>
                        </Tab>
                    </Tabs>
                </div>
            </div>
        </div >
    )
}