"use client"

import { Mail } from "lucide-react"

import { FormPageHeader } from "@/app/dashboard/_components/form"
import { CommonTemplateContent } from "@/components/settings/common-template/components/common-template-content"
import { CommonTemplateTabNav } from "@/components/settings/common-template/components/common-template-tab-nav"

export function CommonTemplatePage() {
  return (
    <div className="flex flex-col">
      <FormPageHeader
        backHref="/dashboard/settings/common"
        parentLabel="Settings"
        currentLabel="Email templates"
        titleIcon={<Mail className="size-4 text-primary" />}
        title="Email templates"
        description="Edit the shared common template wrapper used across outbound emails."
      />

      <div className="overflow-hidden rounded-lg border border-border bg-background shadow-sm">
        <CommonTemplateTabNav />
        <CommonTemplateContent />
      </div>
    </div>
  )
}