<script lang="ts">
  import ContentRows from "./ContentRows.svelte";
  import type { RowContentLayout } from "../lib/block-types";
  import { t as tStatic, T } from "../lib/translations";
  import type { Translations } from "../lib/translations";

  interface FooterEntry extends RowContentLayout {
    id?: string;
  }

  let { footer = null, translations = {} }: { footer?: FooterEntry | null; translations?: Translations | null } = $props();

  function t(key: string) {
    return tStatic(translations ?? null, key);
  }

  const justifyClass = $derived(
    footer?.row1JustifyContent === "end"
      ? "justify-end"
      : footer?.row1JustifyContent === "between"
        ? "justify-between"
        : footer?.row1JustifyContent === "around"
          ? "justify-around"
          : footer?.row1JustifyContent === "evenly"
            ? "justify-evenly"
            : footer?.row1JustifyContent === "start"
              ? "justify-start"
              : "justify-center",
  );

  const hasRowContent = $derived(
    !!footer &&
      ((footer.row1Content?.length ?? 0) > 0 ||
        (footer.row2Content?.length ?? 0) > 0 ||
        (footer.row3Content?.length ?? 0) > 0),
  );
</script>

{#if footer}
  <footer
    class="mt-auto bg-zinc-950 text-white py-6"
    data-footer-id={footer.id}
  >
    <div class="container-custom py-6">
      {#if hasRowContent}
        <div class="content-footer text-xs">
          <ContentRows layout={footer} translations={translations} />
        </div>
      {:else}
        <p class="text-sm text-white/80 {justifyClass} flex">
          {t(T.footer_copyright) !== T.footer_copyright
            ? t(T.footer_copyright)
            : `© ${new Date().getFullYear()} RustyAstro`}
        </p>
      {/if}
    </div>
  </footer>
{/if}
