import Link from 'next/link';
import { Logo } from '@/components/logo';
import { ThemeToggle } from '@/components/theme-toggle';

export type FooterProps = {
  siteName?: string;
  logoUrl?: string;
  description?: string;
  links?: Array<{ label: string; url: string }>;
  socialLinks?: Array<{ label: string; url: string }>;
  copyright?: string;
  showThemeToggle?: 'yes' | 'no';
};

export default function Footer({
  siteName = 'Your Company', logoUrl = '', description = '', links = [], socialLinks = [], copyright, showThemeToggle = 'yes',
}: FooterProps) {
  return (
    <footer className="bg-background">
      <div className="section-shell grid gap-10 py-14 md:grid-cols-[1.3fr_1fr] md:py-16">
        <div className="max-w-sm">
          <Logo name={siteName} logoUrl={logoUrl} />
          {description && <p className="mt-4 text-sm leading-6 text-muted-foreground">{description}</p>}
        </div>
        <div className="grid grid-cols-2 gap-8 sm:grid-cols-[1fr_1fr_auto]">
          <nav aria-label="Footer navigation" className="flex flex-col gap-3">
            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Explore</p>
            {links.map((link) => <Link key={`${link.label}-${link.url}`} href={link.url} className="text-sm hover:text-brand">{link.label}</Link>)}
          </nav>
          <nav aria-label="Social links" className="flex flex-col gap-3">
            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Connect</p>
            {socialLinks.map((link) => <a key={`${link.label}-${link.url}`} href={link.url} className="text-sm hover:text-brand">{link.label}</a>)}
          </nav>
          {showThemeToggle === 'yes' && <div className="col-span-2 sm:col-span-1"><ThemeToggle /></div>}
        </div>
      </div>
      <div className="section-shell py-5 text-xs text-muted-foreground">
        {copyright || `© ${new Date().getFullYear()} ${siteName}. All rights reserved.`}
      </div>
    </footer>
  );
}