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>;
  id?: string;
}

export function SectionCard({ children, ref, style, ...props }: SectionCardProps) {
  return (
    <Paper
      ref={ref}
      radius={16}
      p="lg"
      bg="white"
      style={{
        border: "1px solid #E6ECF2",
        boxShadow: "0 1px 2px rgba(16,24,40,0.04)",
        ...(style as object),
      }}
      {...props}
    >
      {children}
    </Paper>
  );
}

export function CardTitle({ children }: { children: ReactNode }) {
  return (
    <Text
      fz="11px"
      fw={700}
      c="#6B7C8E"
      tt="uppercase"
      style={{ letterSpacing: "0.06em" }}
    >
      {children}
    </Text>
  );
}
