import type React from "react"
import type { Metadata } from "next"
import { Header } from "@/components/layout/header"
import { Footer } from "@/components/layout/footer"
import { Breadcrumb } from "@/components/layout/breadcrumb"
import { WhatsAppButton } from "@/components/layout/whatsapp-button"

export const metadata: Metadata = {
  title: "Beyond Bytes - Articles | Beyond Classroom Coding",
  description:
    "Read the latest articles, insights, and tutorials on coding, robotics, AI, and education technology from the Beyond Classroom Coding team.",
}

export default function ArticlesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <Header />
      <div className="pt-20">
        <div className="bg-slate-50 py-4">
          <div className="container mx-auto px-4">
            <Breadcrumb />
          </div>
        </div>
        {children}
      </div>
      <Footer />
      <WhatsAppButton />
    </>
  )
}