import delve from "dlv";

export function Footer({items = []}) {

  const generateItem = (item, index) => {
    const value = delve(item, 'attributes', {});

    return (
      <li key={value.title + index}>
        <a href={value.url} target={value.target} className="mr-4 hover:underline md:mr-6 ">
          {value.title}
        </a>
      </li>
    );
  }

  return (
    <footer className="p-4 bg-white md:px-6 md:py-8 dark:bg-gray-900">
      <div className="sm:flex sm:items-center sm:justify-between">
        <a href="/" className="flex items-center mb-4 sm:mb-0">
          <img src="https://flowbite.com/docs/images/logo.svg" className="h-8 mr-3" alt="Flowbite Logo"/>
          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
        </a>
        <ul className="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
          {items.map((item, index: number) => generateItem(item, index))}
        </ul>
      </div>
      <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"/>
      <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 3 <a
        href="https://flowbite.com/" className="hover:underline">Flowbite™</a>. All Rights Reserved.
    </span>
    </footer>
  );
}

export default Footer;