import React from 'react';
import { Link } from '@tanstack/react-router';

interface FooterLink {
  label: string;
  href: string;
}

interface FooterProps {
  links?: FooterLink[];
  copyright?: string;
}

const Footer = ({ 
  links = [], 
  copyright = 'EmberClone 2026' 
}: FooterProps) => {
  return (
    <footer className="border-t border-zinc-200 dark:border-zinc-800 py-6 px-4 mt-auto">
      <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
        <div className="text-sm text-zinc-500">
          {copyright}
        </div>
        
        {links.length > 0 && (
          <nav className="flex gap-6">
            {links.map((link) => (
              <Link 
                key={link.href} 
                to={link.href} 
                className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
              >
                {link.label}
              </Link>
            ))}
          </nav>
        )}
      </div>
    </footer>
  );
};

export default Footer;