import React from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';
import BrandLogo from '@/components/layout/BrandLogo.tsx';

interface FooterProps {
  onNavigate: (page: 'about' | 'contact' | 'privacy') => void;
}

const Footer = ({ onNavigate }: FooterProps) => {
  const { t } = useTranslation();
  return (
    <footer className="bg-muted/50 border-t">
      <div className="mx-auto max-w-6xl px-4 py-8">
        <div className="flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex items-center gap-2">
            <BrandLogo />
            <div className="leading-tight">
              <p className="font-serif text-lg font-semibold text-foreground">
                {t('topBar.title')}
              </p>
              <p className="text-sm text-muted-foreground">
                {t('footer.copyright', { year: new Date().getFullYear() })}
              </p>
            </div>
          </div>
          <nav
            className="flex flex-wrap gap-x-6 gap-y-2 justify-center"
            aria-label="Footer navigation"
          >
            <button
              onClick={() => onNavigate('about')}
              className="text-sm text-muted-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded px-2 py-1"
              aria-label={`Navigate to ${t('footer.links.about')}`}
            >
              {t('footer.links.about')}
            </button>
            <button
              onClick={() => onNavigate('contact')}
              className="text-sm text-muted-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded px-2 py-1"
              aria-label={`Navigate to ${t('footer.links.contact')}`}
            >
              {t('footer.links.contact')}
            </button>
            <button
              onClick={() => onNavigate('privacy')}
              className="text-sm text-muted-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded px-2 py-1"
              aria-label={`Navigate to ${t('footer.links.privacy')}`}
            >
              {t('footer.links.privacy')}
            </button>
          </nav>
        </div>
      </div>
    </footer>
  );
};

export default React.memo(Footer);