---
import { Icon } from 'astro-icon/components'
import { SOURCE_CODE_URL } from 'astro:env/server'

import { cn } from '../lib/cn'

import type { HTMLAttributes } from 'astro/types'

type Props = HTMLAttributes<'footer'>

const links = [
  {
    href: SOURCE_CODE_URL,
    label: 'Source Code',
    icon: 'ri:git-repository-line',
    external: true,
  },
  {
    href: '/about',
    label: 'About',
    icon: 'ri:information-line',
    external: false,
  },
] as const satisfies {
  href: string
  label: string
  icon: string
  external: boolean
}[]

const { class: className, ...htmlProps } = Astro.props
---

<footer class={cn('flex items-center justify-center gap-6 p-4', className)} {...htmlProps}>
  {
    links.map(
      ({ href, label, icon, external }) =>
        href && (
          <a
            href={href}
            target={external ? '_blank' : undefined}
            rel={external ? 'noopener noreferrer' : undefined}
            class="text-day-500 dark:text-day-400 dark:hover:text-day-300 flex items-center gap-1 text-sm transition-colors hover:text-gray-700"
          >
            <Icon name={icon} class="h-4 w-4" />
            {label}
          </a>
        )
    )
  }
</footer>