import Breadcrumb, { BreadcrumbItem } from "@/components/breadcrumb"
import PageHero from "@/components/PageHero"
import DocumentItem, { DocumentProps } from "./DocumentItem"

export const metadata = {
    title: 'Dökümanlar'
}


const Kutuphane: React.FC = () => {

    const breadcrumbItems: BreadcrumbItem[] = [
        {
            label: 'Kütüphane',
            href: '',
            isCurrent: true
        }
    ]


    const documan: DocumentProps[] = [

        {
            title: "A16 PushButton Swich",
            category: 'Kumanda  Butonları ve Siyah Lambaları',
            categories: 'Omron, Anahtarlama Komponenetleri, Kumonda Butonları',
            link: '/'
        },


    ]

    return (

        <>
            <Breadcrumb items={breadcrumbItems} />
            <PageHero
                title="Kütüphane  Ürün Detaylarına Koyal Eiriğim"
                subtitle="Döküman & Datasheet İndirme"
                content="Incididunt ea reprehenderit sit minim ex do ipsum tempor incididunt in minim duis Lorem. Do irure commodo commodo sit dolor minim minim in. Aliqua occaecat fugiat incididunt occaecat. Pariatur proident minim aliqua ut officia amet voluptate aliquip fugiat sit."
                icon="/ico_dokuman.svg" />


            <div className="py-20 bg-acikgri">

                <div className="container">

                    <h2 className="heading mb-2"> Döküman Ara</h2>
                    <div className="grid grid-col-1  md:grid-cols-2 lg:grid-cols-4 gap-7">

                        <select className="select bg-acikgri">
                            <option> Marka </option>
                        </select>
                        <select className="select bg-acikgri">
                            <option> Kategori </option>
                        </select>
                        <select className="select bg-acikgri">
                            <option> Ürün </option>
                        </select>
                        <select className="select bg-acikgri">
                            <option> Döküman Tipi </option>
                        </select>
                    </div>

                    <div className="flex gap-6 text-sm mt-4">

                        <button className="bg-primary border border-primary px-14 py-2 text-white hover:bg-white hover:text-primary duration-300"> Ara</button>
                        <button className="bg-primary border border-primary px-14 py-2 text-white hover:bg-white hover:text-primary duration-300"> Temizle</button>

                    </div>

                    <div className="container bg-white py-4 mt-6 shadow-lg px-8">

                        <div className="flex flex-col  divide-y-2">

                            {
                                documan.map((item, index) => (
                                    <DocumentItem {...item} key={index} />
                                ))
                            }

                        </div>

                    </div>

                </div>

            </div> 

        </>

    )


}

export default Kutuphane;