import type { JSX } 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 { 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>
      <TemplatePicker />
    </div>
  )
}