import { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Link from 'next/link'
import { BookOpenIcon } from '@heroicons/react/24/outline'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: {
    default: 'Bookwiz Blog - Writing Tips and Insights',
    template: '%s | Bookwiz Blog'
  },
  description: 'Explore writing tips, insights, and updates from the Bookwiz team. Learn how to write better with AI assistance and modern writing tools.',
  keywords: [
    'writing blog',
    'AI writing tips',
    'writing software',
    'author tools',
    'writing technology'
  ],
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://bookwiz.io/blog',
    title: 'Bookwiz Blog - Writing Tips and Insights',
    description: 'Explore writing tips, insights, and updates from the Bookwiz team.',
    siteName: 'Bookwiz',
  },
}

export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className={`min-h-screen bg-slate-900 ${inter.className}`}>
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-slate-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <Link href="/" className="flex items-center space-x-2 text-white">
              <BookOpenIcon className="w-6 h-6" />
              <span className="font-semibold">Bookwiz</span>
            </Link>
            <div className="flex items-center space-x-4">
              <Link href="/blog" className="text-sm text-white">
                Blog
              </Link>
              <Link href="/pricing" className="text-sm text-white">
                Pricing
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <main>
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          {children}
        </div>
      </main>

      {/* Footer */}
      <footer className="py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center text-sm text-slate-400">
            © {new Date().getFullYear()} Bookwiz. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  )
}