'use client'
import { Button } from '@nextui-org/button';
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react';
import Link from 'next/link';
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";

export default function Campaign() {
    const settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
    };

    const dummyData = [
        {
            id: 1,
            date: '03/01/2024 14:30 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/kampanye1.png',
            link: '/link1',
        },
        {
            id: 2,
            date: '03/02/2024 15:45 WIB',
            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
            imageUrl: '/kampanye2.png',
            link: '/link2',
        },
        {
            id: 3,
            date: '03/02/2024 15:45 WIB',
            title: 'MNC Penyelenggara Debat C',
            imageUrl: '/kampanye3.png',
            link: '/link2',
        },
    ];

    return (
        <div className='py-10'>
            <p className='text-3xl font-bold text-center text-[#FF3900] pt-10'>Kampanye Daerah</p>
            <div className='pt-10'>
                <div className='flex flex-wrap  justify-center gap-4 h-full'>
                    {dummyData.map((item, index) => (
                        <Card shadow="sm" key={index} className='w-[280px]'>
                            <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 border-2 h-full">
                                <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>
                <div className='flex justify-center pt-5'>
                    <Button
                        className='text-[#FF3900] font-bold border-[#FF3900]'
                        variant='bordered'
                        radius='full'
                    >
                        Lihat Selengkapnya
                    </Button>
                </div>
            </div>
        </div>
    )
}