"use client";

import { Stack, TextInput } from "@mantine/core";
import { Search } from "lucide-react";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { HelpDeskSubNav } from "@/components/help-desk-admin/HelpDeskSubNav";
import { DashboardLayout } from "@/layouts/DashboardLayout";

interface HelpDeskAdminLayoutProps {
  children: React.ReactNode;
  title: string;
  subtitle?: string;
  search?: string;
  onSearchChange?: (value: string) => void;
  searchPlaceholder?: string;
}

/** Central de Ajuda dentro do painel admin (mesmo shell do dashboard). */
export function HelpDeskAdminLayout({
  children,
  title,
  subtitle,
  search,
  onSearchChange,
  searchPlaceholder = "Buscar tickets, clientes...",
}: HelpDeskAdminLayoutProps) {
  return (
    <DashboardLayout title="Central de Ajuda">
      <HelpDeskSubNav />
      <Stack gap="lg">
        <PageHeader title={title} description={subtitle} />
        {onSearchChange && (
          <TextInput
            placeholder={searchPlaceholder}
            value={search ?? ""}
            onChange={(e) => onSearchChange(e.currentTarget.value)}
            leftSection={<Search size={16} />}
            radius="xl"
            maw={400}
            classNames={{ input: "hd-admin-search" }}
          />
        )}
        {children}
      </Stack>
    </DashboardLayout>
  );
}