<script setup lang="ts">
const { g, p } = useContentInjected()

const range = computed(() => {
  const from = Number(g.value.scaffold?.copyright?.from)
  const to = new Date().getFullYear()

  return Number.isNaN(from) || from === to ? to.toString() : `${from}–${to}`
})

const props = defineProps<{
  class?: string
  ux?: any
}>()

const classes = useStyling(
  'footerCopyrightLegal',
  {
    slots: {
      base: 'w-full flex flex-col items-center',
      copyright: 'w-full text-center truncate text-sm',
      links: 'flex flex-row flex-wrap',
      link: 'text-sm',
    },
  },
  props
)
</script>

<template>
  <div :class="classes.base">
    <XText as="hint" color="muted" :class="classes.copyright" :margin="false">
      &copy; {{ range }} {{ g.business.name }}
    </XText>

    <div :class="classes.links">
      <XText
        as="link"
        :class="classes.link"
        :link-props="{ to: p(item.link) }"
        :text="item.text"
        v-for="item in g.scaffold.legal"
      />
    </div>
  </div>
</template>
