"use client"

import { MousePointerClick } from "lucide-react"

import { ListPageCard } from "@/app/dashboard/_components"
import { CommonTemplateTabNav } from "@/components/settings/common-template/components/common-template-tab-nav"
import { EmailTemplatesTable } from "@/components/settings/email-templates/components/email-templates-table"
import { useEmailTemplates } from "@/components/settings/email-templates/hooks/use-email-templates"

export function EmailTemplatesPage() {
  const { data, isLoading, isRefreshing, refresh, removeLocal } =
    useEmailTemplates()

  return (
    <ListPageCard
      icon={MousePointerClick}
      title="Email templates"
      description="Browse, filter, and manage transactional and marketing email templates."
      breadcrumb={[
        { label: "Settings", href: "/dashboard/settings/common" },
        { label: "Email templates" },
      ]}
      subNav={<CommonTemplateTabNav />}
      contentClassName="p-4 pt-4 sm:p-6"
    >
      <EmailTemplatesTable
        data={data}
        isLoading={isLoading}
        isRefreshing={isRefreshing}
        onRefresh={() => void refresh()}
        onDelete={removeLocal}
      />
    </ListPageCard>
  )
}