import { ProfileLayoutViewData } from '@/lib/view-data/ProfileLayoutViewData';
import { ProfileSidebarTemplate } from '@/templates/ProfileSidebarTemplate';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import type { ReactNode } from 'react';

interface ProfileLayoutShellTemplateProps {
  viewData: ProfileLayoutViewData;
  children: ReactNode;
}

export function ProfileLayoutShellTemplate({ viewData, children }: ProfileLayoutShellTemplateProps) {
  return (
    <Box minHeight="screen" backgroundColor="#0C0D0F">
      <Container size="lg" py={8}>
        <Stack direction="row" gap={8} alignItems="start">
          <Box as="aside" width="64" flexShrink={0}>
            <ProfileSidebarTemplate viewData={viewData} />
          </Box>
          <Box as="main" flexGrow={1} minWidth="0">
            {children}
          </Box>
        </Stack>
      </Container>
    </Box>
  );
}