<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 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-stein-900 text-stein-0 py-10"
    data-footer-id={footer.id}
  >
    <div class="container-custom">
      {#if hasRowContent}
        <div class="content-footer text-sm text-stein-200">
          <ContentRows layout={footer} translations={translations} />
        </div>
      {:else}
        <p class="text-sm text-stein-0/80 text-center">
          {t(T.footer_copyright) !== T.footer_copyright
            ? t(T.footer_copyright)
            : `© ${new Date().getFullYear()} Windwiderstand`}
        </p>
      {/if}
    </div>
  </footer>
{/if}

<style>
  .content-footer :global(.content) {
    margin: 0;
  }
  .content-footer :global(.content-row) {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
  }
  .content-footer :global(.content-row > *) {
    flex: 1 1 200px;
    grid-column: auto !important;
    min-width: 0;
  }
  .content-footer :global(.content-row + .content-row) {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-stein-700);
  }
  .content-footer :global(a) {
    color: var(--color-stein-200);
  }
  .content-footer :global(a:hover) {
    color: var(--color-stein-0);
  }
  .content-footer :global(h3) {
    color: var(--color-stein-0);
  }
  .content-footer :global(.markdown),
  .content-footer :global(.prose) {
    color: var(--color-stein-200);
  }
</style>
