import type { JSX } from "react"
import { Suspense } from "react"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { getTranslations } from "next-intl/server"
import { Button } from "@/shared/components/ui/button"
import { Skeleton } from "@/shared/components/ui/skeleton"
import { TemplatePicker } from "@/modules/lesson-preparation/components/template-picker"

export const dynamic = "force-dynamic"

export default async function NewLessonPlanPage(): Promise<JSX.Element> {
  const t = await getTranslations("lessonPreparation")
  return (
    <div className="p-6">
      <div className="mb-6 flex items-center gap-4">
        <Button asChild variant="ghost" size="sm">
          <Link href="/teacher/lesson-plans">
            <ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
            {t("action.back")}
          </Link>
        </Button>
        <h1 className="text-2xl font-bold tracking-tight">{t("title.new")}</h1>
      </div>
      <Suspense
        fallback={
          <div className="max-w-3xl mx-auto p-6 space-y-6">
            <Skeleton className="h-10 w-full" />
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {Array.from({ length: 4 }).map((_, i) => (
                <Skeleton key={i} className="h-[100px] w-full" />
              ))}
            </div>
          </div>
        }
      >
        <TemplatePicker />
      </Suspense>
    </div>
  )
}