'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
import Image from 'next/image'
import Link from 'next/link';
import React from 'react'

export default function Headline() {

    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='h-screen space-y-5 pt-10 bg-[#F1F4FE]'>
            <div className='mx-7 space-y-4'>
                <div className='text-3xl font-bold z-10 text-black'>Headline News</div>
                <div>
                    <div className="flex w-full flex-col">
                        <Tabs
                            aria-label="Options"
                            size='sm'
                            color='primary'
                            className='pb-5 pt-4'
                            radius='full'
                        // disabledKeys={["audio", "foto", "teks"]}
                        >
                            <Tab key="audiovisual" title="Audio Visual">
                                <div className='flex justify-center gap-4'>
                                    {headlineData.map((data) => (
                                        <Card key={data.id} className='max-h-max w-[250px] items-center rounded-lg'>
                                            <CardBody>
                                                <Image
                                                    alt='visimisi'
                                                    className='rounded-lg'
                                                    src={data.imageUrl}
                                                    height={150}
                                                    width={220}
                                                />
                                            </CardBody>
                                            <div className='px-3 pb-2'>
                                                <p className='text-xs'>{data.date}</p>
                                                <p className='leading-tight text-sm font-semibold'>{data.title}</p>
                                                <Link href={`headline/detail/${data.id}`}>
                                                    <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkapnya</p>
                                                </Link>
                                            </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="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='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="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>
        </div >
    )
}