import React from 'react'
import { ArrowRight, Target } from 'lucide-react'
import './publicSite.css'

const footerPages = [
  { label: 'Datenschutz', path: '/datenschutz' },
  { label: 'Impressum', path: '/impressum' },
  { label: 'Kontakt', path: '/kontakt' }
]

export default function PublicLayout({
  children,
  themeToggle,
  onGetStarted,
  onNavigate,
  navLinks = [],
  currentPath = '/'
}) {
  return (
    <div className="public-site">
      <div className="public-site__backdrop" />
      <div className="public-site__grid" />

      <header className="public-site__nav">
        <button type="button" className="public-site__brand" onClick={() => onNavigate('/')}>
          <span className="public-site__brand-mark">
            <Target className="h-5 w-5" aria-hidden="true" />
          </span>
          <span className="public-site__brand-copy">
            <span className="public-site__brand-title">PAT Manager</span>
            <span className="public-site__brand-subtitle">Digitale Leistungsdiagnostik für Billard</span>
          </span>
        </button>

        <nav className="public-site__nav-links" aria-label="Öffentliche Navigation">
          {navLinks.map((link) => (
            <button
              key={link.label}
              type="button"
              className={`public-site__nav-link${link.active ? ' is-active' : ''}`}
              onClick={link.onClick}
            >
              {link.label}
            </button>
          ))}
        </nav>

        <div className="public-site__nav-actions">
          {themeToggle && <div className="public-site__theme-toggle">{themeToggle}</div>}
          <button type="button" className="public-site__cta public-site__cta--nav" onClick={onGetStarted}>
            Anmelden
            <ArrowRight className="h-4 w-4" aria-hidden="true" />
          </button>
        </div>
      </header>

      <main className="public-site__main">{children}</main>

      <footer className="public-site__footer">
        <div className="public-site__footer-inner">
          <div className="public-site__footer-links">
            <button type="button" className="public-site__footer-link" onClick={onGetStarted}>
              Anmelden
            </button>
            {footerPages.map((page) => (
              <button
                key={page.path}
                type="button"
                className={`public-site__footer-link${currentPath === page.path ? ' is-active' : ''}`}
                onClick={() => onNavigate(page.path)}
              >
                {page.label}
              </button>
            ))}
          </div>

          <p className="public-site__footer-meta">PAT Manager · Öffentliche Seiten</p>
        </div>
      </footer>
    </div>
  )
}
