import React from "react";

export default function Dropdown() {
    return (
        <>
                    <ul className="flex flex-col text-left w-full lg:w-1/2 list-none">
              {cntServicesHome.services.serviceHome.map((service, i) => (
                <li
                  key={service.id}
                  domIndex={service.id}
                  className="group flex flex-row items-center w-fit px-4 mb-4 text-md dark:text-white font-semibold transition-all hover:shadow-md rounded-xl hover:bg-white dark:hover:bg-dg-primary-1600 dark:hover:border dark:hover:border-solid dark:hover:border-dg-primary-1500 p-2 hover:transition-all"
                  onMouseEnter={e => {
                    handleHover(e);
                    setText(service.paragraph);
                    setIco(api_url + service.icon.data.attributes.formats.thumbnail.url);
                  }}
                >
                  {i + 1 !== cntServicesHome.services.serviceHome.length && (
                    <hr className="-z-10 absolute bg-dg-primary-900 rotate-90 w-12 mt-12 -ml-4" />
                  )}
                  <div className="hexagon transition-all group-hover:bg-dg-primary-900 group-hover:rotate-90 group-hover:transition-all"></div>
                  <a
                    href={'/services#' + service.heading.split(' ')[0]}
                    className="min-w-max pl-2"
                  >
                    {service.heading}
                  </a>
                  <a
                    href={'/services#' + service.heading.split(' ')[0]}
                    className="hidden md:block ml-4 text-xs text-dg-primary-900 uppercase opacity-0 transition-all group-hover:opacity-100 group-hover:transition-all"
                  >
                    Details
                  </a>
                </li>
              ))}
            </ul>
        </>
    )
}