import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import SurfaceCard from '@/components/common/SurfaceCard';
import { CONTENT_MAX_WIDTH } from '@/components/config';

/**
 * The (customer) home shell shape: greeting/avatar + search bar + a category-tile row + a short card
 * stack — mirrors A5 (`(customer)/page.tsx`) closely enough that switching from skeleton to real content
 * doesn't jump. `CustomerLayout` (top bar + bottom tabs) is already rendered by the enclosing layout.
 */
export default function Loading() {
  return (
    <Box sx={{ maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}>
      <Stack sx={{ gap: 2.5 }}>
        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
          <Skeleton variant="circular" width={48} height={48} />
          <Skeleton variant="text" width="45%" height={28} />
        </Stack>
        <Skeleton variant="rounded" height={48} sx={{ borderRadius: 'var(--bal-radius-sm)' }} />
        <Stack direction="row" sx={{ gap: 1.5, flexWrap: 'wrap' }}>
          {[0, 1, 2, 3].map((key) => (
            <Skeleton key={key} variant="rounded" width={92} height={92} sx={{ borderRadius: 'var(--bal-radius-md)' }} />
          ))}
        </Stack>
        {[0, 1].map((key) => (
          <SurfaceCard key={key}>
            <Stack sx={{ gap: 0.75 }}>
              <Skeleton variant="text" width="50%" height={22} />
              <Skeleton variant="text" width="80%" height={18} />
            </Stack>
          </SurfaceCard>
        ))}
      </Stack>
    </Box>
  );
}