import type { ReactNode } from 'react'
import { IBM_Plex_Mono, IBM_Plex_Sans, IBM_Plex_Sans_Condensed } from 'next/font/google'
import { Rail } from '@/components/cluster/Rail'
import { Ribbon } from '@/components/cluster/Ribbon'

const signage = IBM_Plex_Sans_Condensed({
  subsets: ['latin'],
  weight: ['600', '700'],
  variable: '--font-signage',
})

const plex = IBM_Plex_Sans({
  subsets: ['latin'],
  weight: ['400', '500', '600'],
  variable: '--font-plex',
})

const data = IBM_Plex_Mono({
  subsets: ['latin'],
  weight: ['400', '500'],
  variable: '--font-data',
})

export const metadata = {
  title: 'Cluster — Rock Liang',
  description: 'Live view of a Talos Kubernetes cluster: topology, GitOps delivery, and GPU inference.',
}

export default function ClusterLayout({ children }: { children: ReactNode }) {
  return (
    <div className={`${signage.variable} ${plex.variable} ${data.variable} min-h-screen bg-void font-plex text-chalk`}>
      <Ribbon />
      <div className="flex min-h-[calc(100vh-42px)] flex-col md:flex-row">
        <Rail />
        <main className="min-w-0 flex-1 p-4 md:p-6">{children}</main>
      </div>
    </div>
  )
}