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

export default function SimilarNews() {

    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='border-2'>
            <p className='text-center pb-10 text-3xl font-bold text-[#FF3900]'>Berita Serupa</p>
            <div className="gap-2 grid grid-cols-2 sm:grid-cols-5 mx-auto md:mx-10">
                {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>
        </div>
    )
}