import { AppBreadcrumb, AppContent } from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
import { PlusIcon } from "lucide-react";
import { Outlet, useNavigate } from "react-router-dom";
import { CustomersListGrid } from "../components";
import { useTranslation } from "../i18n";

export const CustomersList = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  return (
    <>
      <AppBreadcrumb />
      <AppContent>
        <div className='flex items-center justify-between space-y-2'>
          <div>
            <h2 className='text-2xl font-bold tracking-tight'>{t("pages.list.title")}</h2>
            <p className='text-muted-foreground'>{t("pages.list.description")}</p>
          </div>
          <div className='flex items-center space-x-2'>
            <Button onClick={() => navigate("/customers/create")} className='cursor-pointer'>
              <PlusIcon className='w-4 h-4 mr-2' />
              {t("pages.create.title")}
            </Button>
          </div>
        </div>
        <div className='flex flex-col w-full h-full py-4'>
          <CustomersListGrid />
        </div>
        <Outlet />
      </AppContent>
    </>
  );
};