'use client'

import { PagePurpose } from '@/components/common/PagePurpose'
import { getModuleByHref } from '@/lib/navigation'
import { Gamepad2, Construction } from 'lucide-react'

export default function GamePage() {
  const moduleInfo = getModuleByHref('/development/game')

  return (
    <div className="space-y-6">
      {moduleInfo && (
        <PagePurpose
          title={moduleInfo.module.name}
          purpose={moduleInfo.module.purpose}
          audience={moduleInfo.module.audience}
          collapsible={true}
          defaultCollapsed={true}
        />
      )}

      <div className="bg-white border border-slate-200 rounded-xl p-8 text-center">
        <div className="flex justify-center mb-4">
          <div className="p-4 bg-slate-100 rounded-full">
            <Gamepad2 className="w-12 h-12 text-slate-400" />
          </div>
        </div>
        <h2 className="text-xl font-semibold text-slate-800 mb-2">Breakpilot Drive</h2>
        <p className="text-slate-600 mb-4">
          Lernspiel-Management fuer Level, Inhalte und Lernziele.
        </p>
        <div className="inline-flex items-center gap-2 px-4 py-2 bg-amber-50 border border-amber-200 rounded-lg text-amber-700">
          <Construction className="w-4 h-4" />
          <span className="text-sm font-medium">In Entwicklung</span>
        </div>
      </div>
    </div>
  )
}