"use client"

import type { LucideIcon } from "lucide-react"
import { Info } from "lucide-react"

import { FormPageHeader, FormSaveBar } from "@/app/dashboard/_components/form"
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

type CreateFormLayoutProps = {
  icon: LucideIcon
  title: string
  subtitle?: string
  cancelHref: string
  parentLabel?: string
  isSubmitting?: boolean
  helpMessage?: string
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
  children: React.ReactNode
}

export function CreateFormLayout({
  icon: Icon,
  title,
  subtitle,
  cancelHref,
  parentLabel = "Back",
  isSubmitting,
  helpMessage,
  onSubmit,
  children,
}: CreateFormLayoutProps) {
  return (
    <form onSubmit={onSubmit} className="flex flex-col">
      <FormPageHeader
        backHref={cancelHref}
        parentLabel={parentLabel}
        currentLabel={title}
        titleIcon={<Icon className="size-4 text-primary" />}
        title={title}
        description={subtitle}
        meta={
          helpMessage ? (
            <Tooltip>
              <TooltipTrigger asChild>
                <Button type="button" variant="ghost" size="icon" className="size-8">
                  <Info className="size-4" />
                  <span className="sr-only">Help</span>
                </Button>
              </TooltipTrigger>
              <TooltipContent side="bottom" className="max-w-xs">
                {helpMessage}
              </TooltipContent>
            </Tooltip>
          ) : null
        }
      />

      <div className="space-y-6">{children}</div>

      <FormSaveBar cancelHref={cancelHref} isSaving={isSubmitting} />
    </form>
  )
}