import { Button, Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react';
import React from 'react'

export default function MedolUpdate() {
    let tabs = [
        {
            id: "photos",
            label: "Photos",
            content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        },
        {
            id: "music",
            label: "Music",
            content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
        },
        {
            id: "videos",
            label: "Videos",
            content: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        }
    ];
    return (
        <div className='border-2 rounded-lg py-2'>
            <div className='text-2xl font-semibold underline underline-offset-4 text-center decoration-red-600 '>
                Media Online Update
            </div>
            <div className='bg-white text-black p-1 md:p-5 space-y-5'>
                <Tabs
                    classNames={{
                        tabList: "bg-white shadow-lg border",
                        tabContent: 'group-data-[selected=true]:text-[white] text-warning'
                    }}
                    aria-label="Options" color='warning' className='flex justify-center'>
                    <Tab key="mediahub" title="MediaHUB Update">
                        <div className='flex gap-5  justify-center pt-3'>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="300%"
                                        alt="tes"
                                        className="object-cover h-[270px]"
                                        src='/temp/mediahub1.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:31 WITA</p>
                                    <b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
                                </CardFooter>
                            </Card>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="100%"
                                        alt="tes"
                                        className="w-full object-cover h-[270px]"
                                        src='/temp/mediahub2.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:16 WIB</p>
                                    <b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
                                </CardFooter>
                            </Card>
                        </div>
                        <div className='text-center pt-6'>
                            <Button
                                className='bg-white text-[#DD8306] font-bold w-56'
                                size='sm'
                                color='warning'
                                variant='bordered'

                            >
                                Lihat Lebih Banyak
                            </Button>
                        </div>
                    </Tab>
                    <Tab key="tbnews" title="Tribrata News Update">
                        <div className='flex gap-5  justify-center pt-3'>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="300%"
                                        alt="tes"
                                        className="object-cover h-[270px]"
                                        src='/temp/mediahub1.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:31 WITA</p>
                                    <b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
                                </CardFooter>
                            </Card>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="100%"
                                        alt="tes"
                                        className="w-full object-cover h-[270px]"
                                        src='/temp/mediahub2.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:16 WIB</p>
                                    <b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
                                </CardFooter>
                            </Card>
                        </div>
                        <div className='text-center pt-6'>
                            <Button
                                className='bg-white text-[#DD8306] font-bold w-56'
                                size='sm'
                                color='warning'
                                variant='bordered'

                            >
                                Lihat Lebih Banyak
                            </Button>
                        </div>
                    </Tab>
                    <Tab key="inp" title="Indonesia Nasional Police Update">
                        <div className='flex gap-5  justify-center pt-3'>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="300%"
                                        alt="tes"
                                        className="object-cover h-[270px]"
                                        src='/temp/mediahub1.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:31 WITA</p>
                                    <b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
                                </CardFooter>
                            </Card>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="100%"
                                        alt="tes"
                                        className="w-full object-cover h-[270px]"
                                        src='/temp/mediahub2.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:16 WIB</p>
                                    <b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
                                </CardFooter>
                            </Card>
                        </div>
                        <div className='text-center pt-6'>
                            <Button
                                className='bg-white text-[#DD8306] font-bold w-56'
                                size='sm'
                                color='warning'
                                variant='bordered'

                            >
                                Lihat Lebih Banyak
                            </Button>
                        </div>
                    </Tab>
                    <Tab key="polritv" title="Polri TV Update">
                        <div className='flex gap-5  justify-center pt-3'>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="300%"
                                        alt="tes"
                                        className="object-cover h-[270px]"
                                        src='/temp/mediahub1.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:31 WITA</p>
                                    <b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
                                </CardFooter>
                            </Card>
                            <Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
                                <CardBody className="overflow-visible p-0">
                                    <Image
                                        shadow="sm"
                                        radius="lg"
                                        width="100%"
                                        alt="tes"
                                        className="w-full object-cover h-[270px]"
                                        src='/temp/mediahub2.png'
                                    />
                                </CardBody>
                                <CardFooter className="flex flex-col items-start text-left">
                                    <p className='text-xs'>02-04-2024 09:16 WIB</p>
                                    <b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
                                </CardFooter>
                            </Card>
                        </div>
                        <div className='text-center pt-6'>
                            <Button
                                className='bg-white text-[#DD8306] font-bold w-56'
                                size='sm'
                                color='warning'
                                variant='bordered'

                            >
                                Lihat Lebih Banyak
                            </Button>
                        </div>
                    </Tab>
                </Tabs>
            </div>
        </div>
    )
}