---
import { DEFAULT_SITE_SETTINGS } from '../lib/api/client';
import { getI18n } from '../lib/i18n';
import type { SiteSettings } from '../lib/types';

interface Props {
  siteSettings?: SiteSettings;
}

const { siteSettings = DEFAULT_SITE_SETTINGS } = Astro.props;
const { t } = getI18n(Astro);
const social = siteSettings.social;
const currentYear = new Date().getFullYear();
const tools = [
  { icon: 'fa-sitemap', href: '/sitemap.xml', title: t('footer.sitemap') },
  { icon: 'fa-rss', href: '/rss.xml', title: t('footer.rss') },
];
---

<footer class="border-t border-[var(--border-color)]/70 mt-auto py-8">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="terminal-toolbar-shell">
      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div class="terminal-toolbar-module min-w-[14rem]">
          <div class="min-w-0">
            <div class="terminal-toolbar-label">{t('footer.session')}</div>
            <p class="mt-1 text-sm text-[var(--text-secondary)]">{t('footer.copyright', { year: currentYear, site: siteSettings.siteName })}</p>
          </div>
        </div>

        <div class="flex flex-wrap items-center gap-3">
          {tools.map(tool => (
            <a 
              href={tool.href} 
              class="terminal-toolbar-iconbtn"
              title={tool.title}
            >
              <i class={`fas ${tool.icon}`}></i>
            </a>
          ))}
        </div>

        <div class="flex flex-wrap items-center gap-3">
          {social.github && (
            <a 
              href={social.github} 
              target="_blank" 
              rel="noopener noreferrer"
              class="terminal-toolbar-iconbtn"
              aria-label="GitHub"
            >
              <i class="fab fa-github"></i>
            </a>
          )}
          {social.twitter && (
            <a 
              href={social.twitter} 
              target="_blank" 
              rel="noopener noreferrer"
              class="terminal-toolbar-iconbtn"
              aria-label="Twitter"
            >
              <i class="fab fa-twitter"></i>
            </a>
          )}
          {social.email && (
            <a 
              href={social.email}
              class="terminal-toolbar-iconbtn"
              aria-label="Email"
            >
              <i class="fas fa-envelope"></i>
            </a>
          )}
        </div>
      </div>
      <div class="mt-4 border-t border-[var(--border-color)]/70 pt-4">
        <p class="text-xs leading-6 text-[var(--text-tertiary)]">
          {t('footer.summary')}
        </p>
      </div>
    </div>
  </div>
</footer>
