import { Link } from "@onegeo-suite/gatsby-theme-onegeo"
import React from "react"

interface ISideBar {
    documents?: object[]
    links?: object[]
}

const SideBar = (props: ISideBar) => {
    const { documents = [], links = [] } = props
    if (documents?.length == 0 && links?.length == 0) return null
    return (
        <div className="bg-base-100 sticky top-24 mx-5 flex h-full flex-col rounded-xl shadow-lg md:w-1/4">
            {documents.length > 0 && (
                <div className="p-6">
                    <p className="text-base-300 text-sm font-bold uppercase tracking-widest">
                        Téléchargements
                    </p>
                    <div className="mt-2 ">
                        {documents.map((item: any, key: number) => {
                            const file =
                                item.directus_files_id.imageFile.publicURL

                            return (
                                <ul className="leading-8" key={key}>
                                    <li>
                                        <a href={file} target="_blank" download>
                                            {
                                                item.directus_files_id
                                                    .filename_download
                                            }
                                        </a>
                                    </li>
                                </ul>
                            )
                        })}
                    </div>
                </div>
            )}

            {links?.length > 0 && (
                <div className="p-6">
                    <p className="text-base-300 text-sm font-bold uppercase tracking-widest">
                        Liens
                    </p>
                    <div className="mt-2 ">
                        {links.map((item: any) => {
                            return (
                                <ul className="leading-8" key={item.id}>
                                    <li>
                                        <Link
                                            to={item.links_id.url}
                                            target="_blank"
                                        >
                                            <div className="overflow-hidden text-ellipsis">
                                                {" "}
                                                {item.links_id.url}{" "}
                                            </div>
                                        </Link>
                                    </li>
                                </ul>
                            )
                        })}
                    </div>
                </div>
            )}
        </div>
    )
}

export default SideBar