---
import copyrightNotice from "../content/copyright-notice.md?raw";
interface Props {
  breadcrumbs: { name: string; link: string }[];
}
const { breadcrumbs } = Astro.props;
---

<div
  class="w-full bg-orange-50 dark:bg-black p-12 text-slate-500 text-sm dark:text-slate-300 block absolute bottom-0 h-48 px-4 sm:px-6 lg:px-8 2xl:px-24"
>
  <div class="flex items-center">
    <a href="/">
      <span class="font-heading text-3xl font-bold hover:underline">
        CRATE
      </span>
    </a>
    {
      breadcrumbs.map(({ name, link }) => (
        <span>
          <span class="font-light inline-block ml-3 mr-3 text-slate-500 text-lg">
            &gt;
          </span>
          <a class="hover:underline" href={link}>
            {name}
          </a>
        </span>
      ))
    }
  </div>
  <span class="block h-px bg-slate-500 mb-2 mt-2"></span>
  <div class="flex justify-between">
    <span>
      {copyrightNotice.trim()}
    </span>
    <span class="space-x-4">
      <a href="/terms-of-use" class="hover:underline"> Terms of Use </a>
      <span class="text-slate-500 text-lg">|</span>
      <a href="/privacy-policy" class="hover:underline"> Privacy Policy </a>
    </span>
  </div>
</div>