import { Box, Flex, Paper, Stack, Text, type PaperProps } from "@mantine/core";
import type { ReactNode, Ref } from "react";

export function PageShell({ children }: { children: ReactNode }) {
  return (
    <Box mih="100vh">
      <Box mx="auto" w="100%" px={32} pt={28} pb={32}>
        <Stack gap="lg">{children}</Stack>
      </Box>
    </Box>
  );
}

export function BodyGrid({ left, right }: { left: ReactNode; right: ReactNode }) {
  return (
    <Flex
      direction={{ base: "column", lg: "row" }}
      align={{ base: "stretch", lg: "flex-start" }}
      gap={24}
    >
      {/* Left column: capped at 700px on tablet so it doesn't bleed edge-to-edge */}
      <Box flex={1} miw={0} maw={700} className="flex flex-col gap-6 lg:max-w-none">
        {left}
      </Box>
      <Box
        w={360}
        maw="100%"
        className="flex flex-col gap-6 shrink-0"
      >
        {right}
      </Box>
    </Flex>
  );
}

interface SectionCardProps extends PaperProps {
  children: ReactNode;
  ref?: Ref<HTMLDivElement>;
}

export function SectionCard({ children, ref, ...props }: SectionCardProps) {
  return (
    <Paper ref={ref} radius={20} p="lg" withBorder bg="white" {...props}>
      {children}
    </Paper>
  );
}

export function CardTitle({ children }: { children: ReactNode }) {
  return (
    <Text fz="16px" fw={800} c="#10202F">
      {children}
    </Text>
  );
}
