"use client"

import { MousePointerClick } from "lucide-react"

import { ListPageCard } from "@/app/dashboard/_components"
import { DeliveryServersTable } from "@/components/settings/delivery-servers/components/delivery-servers-table"
import { useDeliveryServers } from "@/components/settings/delivery-servers/hooks/use-delivery-servers"

export function DeliveryServersPage() {
  const { data, isLoading, isRefreshing, refresh } = useDeliveryServers()

  return (
    <ListPageCard
      icon={MousePointerClick}
      title="Delivery servers"
      description="Manage SMTP and outbound email delivery servers for system and customer accounts."
      breadcrumb={[
        { label: "Settings", href: "/dashboard/settings/common" },
        { label: "Delivery servers" },
      ]}
    >
      <DeliveryServersTable
        data={data}
        isLoading={isLoading}
        isRefreshing={isRefreshing}
        onRefresh={() => void refresh()}
      />
    </ListPageCard>
  )
}