import { Button } from '@nextui-org/button'
import { Card, CardBody, CardFooter } from '@nextui-org/react'
import Image from 'next/image'
import React from 'react'

export default function Campaign() {
    return (
        <div>
            <div className='h-screen'>
                <p className='text-3xl font-bold text-red-600 text-center pt-10'>Kampanye Daerah</p>
                <div className='space-y-2 pt-10'>
                    <div className='flex justify-center gap-4 border-2'>
                        <Card className='h-[400px] w-[250px] overflow-hidden '>
                            <CardBody className="items-center ">
                                <Image
                                    alt="Card background"
                                    className="object-cover rounded-t-xl"
                                    src="/vm1.jpg"
                                    width={180}
                                    height={200}
                                />
                            </CardBody>
                            <CardFooter className='flex flex-col border overflow-hidden leading-tight p-0 items-start'>
                                <p className='text-xs'>03/01/2024 14:00 WIB</p>
                                <p className='leading-none'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p >
                                <p className='text-xs text-blue-800'>Lihat Selengkapnya</p>
                            </CardFooter>
                        </Card>
                        {/* <Card className="py-2 h-[420px] w-[300px]">
                            <CardBody className="overflow-visible py-2">
                                <Image
                                    alt="Card background"
                                    className="object-cover rounded-xl h-full"
                                    src="/HL1.png"
                                    width={270}
                                    height={400}
                                />
                            </CardBody>
                            <CardFooter className="pb-0 pt-2 px-4 flex-col items-start">
                                <p className="text-tiny uppercase font-bold">Daily Mix</p>
                                <small className="text-default-500">12 Tracks</small>
                                <h4 className="font-bold text-large">Frontend Radio</h4>
                            </CardFooter>
                        </Card>
                        <Card className="py-2 w-[270px]">
                            <CardBody className="overflow-visible py-2">
                                <Image
                                    alt="Card background"
                                    className="object-cover rounded-xl h-full"
                                    src="/HL1.png"
                                    width={270}
                                    height={400}
                                />
                            </CardBody>
                            <CardFooter className="pb-0 pt-2 px-4 flex-col items-start">
                                <p className="text-tiny uppercase font-bold">Daily Mix</p>
                                <small className="text-default-500">12 Tracks</small>
                                <h4 className="font-bold text-large">Frontend Radio</h4>
                            </CardFooter>
                        </Card>
                        <Card className="py-2 w-[270px]">
                            <CardBody className="overflow-visible py-2">
                                <Image
                                    alt="Card background"
                                    className="object-cover rounded-xl h-full"
                                    src="/HL1.png"
                                    width={270}
                                    height={400}
                                />
                            </CardBody>
                            <CardFooter className="pb-0 pt-2 px-4 flex-col items-start">
                                <p className="text-tiny uppercase font-bold">Daily Mix</p>
                                <small className="text-default-500">12 Tracks</small>
                                <h4 className="font-bold text-large">Frontend Radio</h4>
                            </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>
        </div>
    )
}