import { Skeleton } from "@/components/ui/skeleton";
import { tr } from "@/i18n/tr";

/** Oturum okunurken gösterilen kabuk iskeleti (yan menü + üst bar + içerik). */
export function AppShellFallback() {
  return (
    <div role="status" aria-label={tr.common.loading} className="flex min-h-dvh w-full">
      <div className="hidden w-64 shrink-0 flex-col gap-3 border-r bg-sidebar p-3 md:flex">
        <Skeleton className="h-8 w-28" />
        {Array.from({ length: 8 }, (_, i) => (
          <Skeleton key={i} className="h-7 w-full" />
        ))}
      </div>
      <div className="flex flex-1 flex-col">
        <div className="flex h-14 items-center gap-2 border-b px-4">
          <Skeleton className="h-8 w-48" />
          <Skeleton className="ml-auto size-8 rounded-full" />
        </div>
        <div className="flex flex-col gap-4 p-4 md:p-6">
          <Skeleton className="h-8 w-56" />
          <Skeleton className="h-24 w-full" />
        </div>
      </div>
    </div>
  );
}