import { flexbox } from '@mui/system';

const flexbox = compose(
  flexBasis,
  flexDirection,
  flexWrap,
  justifyContent,
  alignItems,
  alignContent,
  order,
  flex,
  flexGrow,
  flexShrink,
  alignSelf,
  justifyItems,
  justifySelf,
);

<Box display="flex" flexDirection="row">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Box>

<Box display="flex" flexDirection="column">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Box>

<Box display="flex" flexDirection="row-reverse">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Box>

export const flexDirection = style({
  prop: 'flexDirection',
});

<Box display="flex" flexWrap="nowrap">
  Items don't wrap
</Box>

<Box display="flex" flexWrap="wrap">
  Items wrap to next line
</Box>

<Box display="flex" flexWrap="wrap-reverse">
  Items wrap in reverse
</Box>

export const flexWrap = style({
  prop: 'flexWrap',
});

<Box display="flex" justifyContent="flex-start">
  Start
</Box>

<Box display="flex" justifyContent="center">
  Center
</Box>

<Box display="flex" justifyContent="flex-end">
  End
</Box>

<Box display="flex" justifyContent="space-between">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Box>

<Box display="flex" justifyContent="space-around">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Box>

<Box display="flex" justifyContent="space-evenly">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Box>

export const justifyContent = style({
  prop: 'justifyContent',
});

<Box display="flex" alignItems="flex-start" height={200}>
  Top aligned
</Box>

<Box display="flex" alignItems="center" height={200}>
  Vertically centered
</Box>

<Box display="flex" alignItems="flex-end" height={200}>
  Bottom aligned
</Box>

<Box display="flex" alignItems="stretch" height={200}>
  Stretched to fill
</Box>

<Box display="flex" alignItems="baseline">
  Baseline aligned
</Box>

export const alignItems = style({
  prop: 'alignItems',
});

<Box
  display="flex"
  flexWrap="wrap"
  alignContent="flex-start"
  height={400}
>
  Multiple wrapped lines
</Box>

<Box
  display="flex"
  flexWrap="wrap"
  alignContent="space-between"
  height={400}
>
  Space between lines
</Box>

export const alignContent = style({
  prop: 'alignContent',
});

<Box display="flex" justifyItems="center">
  Centered items
</Box>

export const justifyItems = style({
  prop: 'justifyItems',
});

<Box display="flex">
  <Box flex={1}>Flex 1</Box>
  <Box flex={2}>Flex 2 (twice as wide)</Box>
  <Box>No flex</Box>
</Box>

<Box display="flex">
  <Box flex="1 1 auto">Full flex shorthand</Box>
  <Box flex="0 0 200px">Fixed width</Box>
</Box>

export const flex = style({
  prop: 'flex',
});

<Box display="flex">
  <Box flexGrow={0}>Don't grow</Box>
  <Box flexGrow={1}>Grow to fill</Box>
  <Box flexGrow={2}>Grow twice as much</Box>
</Box>

export const flexGrow = style({
  prop: 'flexGrow',
});

<Box display="flex" width={200}>
  <Box flexShrink={0} width={300}>Don't shrink</Box>
  <Box flexShrink={1}>Can shrink</Box>
</Box>

export const flexShrink = style({
  prop: 'flexShrink',
});

<Box display="flex">
  <Box flexBasis="200px">200px base</Box>
  <Box flexBasis="50%">50% base</Box>
  <Box flexBasis="auto">Auto base</Box>
</Box>

export const flexBasis = style({
  prop: 'flexBasis',
});

<Box display="flex" alignItems="flex-start" height={200}>
  <Box>Default (start)</Box>
  <Box alignSelf="center">Centered</Box>
  <Box alignSelf="flex-end">End aligned</Box>
</Box>

export const alignSelf = style({
  prop: 'alignSelf',
});

<Box display="flex">
  <Box justifySelf="flex-start">Start</Box>
  <Box justifySelf="center">Center</Box>
  <Box justifySelf="flex-end">End</Box>
</Box>

export const justifySelf = style({
  prop: 'justifySelf',
});

<Box display="flex">
  <Box order={3}>Third (order: 3)</Box>
  <Box order={1}>First (order: 1)</Box>
  <Box order={2}>Second (order: 2)</Box>
</Box>

export const order = style({
  prop: 'order',
});

<Box
  display="flex"
  justifyContent="center"
  alignItems="center"
  minHeight="100vh"
>
  Perfectly centered
</Box>

<Box
  display="flex"
  justifyContent="space-between"
  alignItems="center"
  p={2}
>
  <Box>Logo</Box>
  <Box display="flex" gap={2}>
    <Box>Home</Box>
    <Box>About</Box>
    <Box>Contact</Box>
  </Box>
</Box>

<Box
  display="flex"
  flexDirection="column"
  height="100%"
>
  <Box>Header</Box>
  <Box flexGrow={1}>Content (fills available space)</Box>
  <Box>Footer</Box>
</Box>

<Box
  display="flex"
  flexWrap="wrap"
  gap={2}
>
  <Box flexBasis={{ xs: '100%', sm: 'calc(50% - 8px)', md: 'calc(33.33% - 11px)' }}>
    Item 1
  </Box>
  <Box flexBasis={{ xs: '100%', sm: 'calc(50% - 8px)', md: 'calc(33.33% - 11px)' }}>
    Item 2
  </Box>
  <Box flexBasis={{ xs: '100%', sm: 'calc(50% - 8px)', md: 'calc(33.33% - 11px)' }}>
    Item 3
  </Box>
</Box>

<Box display="flex" minHeight="100vh">
  <Box flexShrink={0} width={250}>
    Sidebar (fixed width)
  </Box>
  <Box flexGrow={1}>
    Main content (fills remaining space)
  </Box>
</Box>

<Box
  display="flex"
  flexDirection={{ xs: 'column', md: 'row' }}
  justifyContent={{ md: 'space-between' }}
  alignItems={{ xs: 'stretch', md: 'center' }}
>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Box>

import { Box } from '@mui/system';

interface FlexContainerProps {
  direction?: 'row' | 'column';
  justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between';
  align?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
  children: React.ReactNode;
}

function FlexContainer({ direction = 'row', justify = 'flex-start', align = 'stretch', children }: FlexContainerProps) {
  return (
    <Box
      display="flex"
      flexDirection={direction}
      justifyContent={justify}
      alignItems={align}
    >
      {children}
    </Box>
  );
}