// components/CustomerSkeleton.tsx
import { AppBreadcrumb, AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
import { useTranslation } from "../i18n";

export const CustomerEditorSkeleton = () => {
  const { t } = useTranslation();
  return (
    <>
      <AppBreadcrumb />
      <AppContent>
        <div className='flex items-center justify-between'>
          <div className='space-y-2' aria-hidden='true'>
            <div className='h-7 w-64 rounded-md bg-muted animate-pulse' />
            <div className='h-5 w-96 rounded-md bg-muted animate-pulse' />
          </div>
          <div className='flex items-center gap-2'>
            <BackHistoryButton />
            <Button disabled aria-busy>
              {t("pages.update.submit")}
            </Button>
          </div>
        </div>
        <div className='mt-6 grid gap-4' aria-hidden='true'>
          <div className='h-10 w-full rounded-md bg-muted animate-pulse' />
          <div className='h-10 w-full rounded-md bg-muted animate-pulse' />
          <div className='h-28 w-full rounded-md bg-muted animate-pulse' />
        </div>
        <span className='sr-only'>{t("pages.update.loading", "Cargando cliente...")}</span>
      </AppContent>
    </>
  );
};