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

interface VersionInfo {
  backend: string;
}

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

  return (
    <footer className="container-page mt-10 py-6 text-xs text-muted">
      <div className="flex flex-col items-center justify-between gap-2 sm:flex-row">
        <div className="flex items-center gap-2">
          <Gift className="h-4 w-4" aria-hidden />
          <span className="font-display text-sm">Family Wishlist</span>
        </div>
        <div className="flex items-center gap-3">
          <span>frontend v{FRONTEND_VERSION}</span>
          <span className="opacity-50">·</span>
          <span>backend v{data?.backend ?? '...'}</span>
        </div>
      </div>
    </footer>
  );
}