---
import type { HTMLAttributes } from "astro/types";
import Socials from "./Socials.astro";

const currentYear = new Date().getFullYear();

type Props = {
  noMarginTop?: boolean;
} & HTMLAttributes<"footer">;

const { noMarginTop = false, class: className, ...attrs } = Astro.props;
---

<footer
  class:list={["app-layout", { "mt-auto": !noMarginTop }, className]}
  {...attrs}
>
  <div
    class:list={[
      "py-6 sm:py-4",
      "border-t border-border",
      "flex flex-col items-center justify-between sm:flex-row-reverse",
    ]}
  >
    <Socials />
    <div class="my-2 flex flex-col items-center whitespace-nowrap sm:flex-row">
      <span>Copyright &#169; {currentYear}</span>
      <span class="hidden sm:inline">&nbsp;|&nbsp;</span>
      <span>All rights reserved.</span>
    </div>
  </div>
</footer>