import { ReactNode } from 'react';
import Link from 'next/link';
import { Header } from './Header';
import { Footer } from './Footer';
import { Container } from '@/components/ui/Container';

interface LayoutProps {
  children: ReactNode;
  locale: string;
  siteName?: string;
  logo?: string;
  showSidebar?: boolean;
  breadcrumb?: Array<{ title: string; path: string }>;
}

export function Layout({ 
  children, 
  locale, 
  siteName = 'KLZ Cables', 
  logo,
  showSidebar = false,
  breadcrumb
}: LayoutProps) {
  return (
    <div className="min-h-screen flex flex-col">
      {/* Header */}
      <Header 
        locale={locale} 
        siteName={siteName} 
        logo={logo} 
      />

      {/* Main Content Area */}
      <main className="flex-1">
        {/* Breadcrumb */}
        {breadcrumb && breadcrumb.length > 0 && (
          <div className="bg-gray-50 border-b border-gray-200">
            <Container maxWidth="6xl" padding="md">
              <nav className="flex items-center gap-2 text-sm text-gray-600 py-3" aria-label="Breadcrumb">
                <Link 
                  href={`/${locale}`} 
                  className="hover:text-primary transition-colors"
                >
                  Home
                </Link>
                {breadcrumb.map((item, index) => (
                  <div key={item.path} className="flex items-center gap-2">
                    <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                    {index === breadcrumb.length - 1 ? (
                      <span className="text-gray-900 font-medium">{item.title}</span>
                    ) : (
                      <Link 
                        href={item.path} 
                        className="hover:text-primary transition-colors"
                      >
                        {item.title}
                      </Link>
                    )}
                  </div>
                ))}
              </nav>
            </Container>
          </div>
        )}

        {/* Content */}
        <Container maxWidth="6xl" padding="md" className="py-8 md:py-12">
          {children}
        </Container>
      </main>

      {/* Footer */}
      <Footer locale={locale} siteName={siteName} />
    </div>
  );
}