'use client'
import { BreadcrumbItem, Breadcrumbs } from '@nextui-org/breadcrumbs'
import { Button } from '@nextui-org/button'
import React from 'react'

export default function EMagazineDetail() {
    return (
        <div className='w-auto bg-[#E2E2E2] text-black'>
            <div className='p-1 md:p-5 lg:px-8'>
                <div className='font-bold text-xl'>E-Majalah Polri</div>
                <div className="pt-2">
                    <Breadcrumbs color='primary'>
                        <BreadcrumbItem href='/'>Beranda</BreadcrumbItem>
                        <BreadcrumbItem href='/e-majalah-polri/daftar-majalah'>E-Majalah Polri</BreadcrumbItem>
                        <BreadcrumbItem>Judul</BreadcrumbItem>
                    </Breadcrumbs>
                </div>
                <div className='pt-5 space-y-4'>
                    <div className='font-semibold border-b-4 border-red-700 leading-loose'>MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023</div>
                    <div className='bg-[#FFFFFF] rounded-lg h-[380px] flex items-center justify-center'>
                        <img src="/emagazine.jpeg" alt="emagazine" className='h-[380px] rounded-md py-1' />
                    </div>
                    <div>
                        <Button
                            className='w-full bg-[#DD8306] text-sm font-semibold'
                        >
                            Download
                        </Button>
                    </div>
                    <div className='bg-[#FFFFFF] rounded-md text-sm font-medium'>
                        <div className='flex justify-between text-white border-t-2 border-l border-r rounded-t-md border-gray-300 p-3 bg-[#9D9D9D]'>
                            <div className='w-5/6'>Judul</div>
                            <div className='w-1/6 text-center border-l border-gray-300'>Keterangan</div>
                        </div>
                        <div className='flex justify-between border border-gray-300 p-3'>
                            <div className='w-5/6'>Download</div>
                            <div className='w-1/6 text-center border-l border-gray-300'>51</div>
                        </div>
                        <div className='flex justify-between border border-gray-300 p-3'>
                            <div className='w-5/6'>File Size</div>
                            <div className='w-1/6 text-center border-l border-gray-300'>12,.58MB</div>
                        </div>
                        <div className='flex justify-between border border-gray-300 p-3'>
                            <div className='w-5/6'>Download</div>
                            <div className='w-1/6 text-center border-l border-gray-300'>10</div>
                        </div>
                        <div className='flex justify-between border border-gray-300 p-3'>
                            <div className='w-5/6'>Created Date</div>
                            <div className='w-1/6 text-center border-l border-gray-300'>1 Oktober 2024</div>
                        </div>
                        <div className='flex justify-between border border-b border-gray-300 p-3 rounded-b-md'>
                            <div className='w-5/6'>Last Update</div>
                            <div className='w-1/6 text-center border-l border-gray-300'>1 Oktober 2024</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}