import Title from '@design-system/Title';
import Stack, { type StackProps } from '@mui/material/Stack';
import { fadeIn } from '@utils/animations';

type ResultsWrapperProps = Omit<StackProps, 'children' | 'ref'> & {
  children: React.ReactNode;
  title: string;
};

const ResultsWrapper = ({ children, title, ...props }: ResultsWrapperProps) => {
  return (
    <Stack
      sx={{
        width: '100%',
        height: '100%',
        animation: `${fadeIn} 150ms ease-in-out backwards`,
        backgroundColor: theme => theme.palette.new.background.layout.default,
      }}
      {...props}
    >
      <Stack
        sx={theme => ({
          backgroundColor: theme.palette.new.background.elements.default,
          px: 3,
          py: 1.5,
          boxShadow: `-1px 4px 8px 0px ${theme.palette.new.shadows['4dp']}`,
          zIndex: 1,
        })}
      >
        <Title
          title={title}
          variant="L"
        />
      </Stack>
      {children}
    </Stack>
  );
};

export default ResultsWrapper;
