import { useQuery } from '@tanstack/react-query';
import { Gift } from 'lucide-react';
import { api } from '@/lib/api';
import { FRONTEND_VERSION } from '@/lib/version';
import { useI18n } from '@/i18n/i18n';

interface VersionInfo {
  backend: string;
}

export function Footer() {
  const { t } = useI18n();
  const { data } = useQuery({
    queryKey: ['version'],
    queryFn: () => api.get<VersionInfo>('/api/version'),
    staleTime: 10 * 60 * 1000,
  });

  return (
    <footer className="app-footer">
      <div className="app-footer__inner">
        <div className="app-footer__brand">
          <Gift className="h-4 w-4" aria-hidden />
          <span className="app-footer__brand-name">{t('app.name')}</span>
        </div>
        <div className="app-footer__meta">
          <span>{t('footer.frontend', { version: FRONTEND_VERSION })}</span>
          <span className="app-footer__separator">·</span>
          <span>{t('footer.backend', { version: data?.backend ?? '...' })}</span>
        </div>
      </div>
    </footer>
  );
}
