import TaskFocusHeader, {
  type TaskFocusHeaderProps,
} from '@design-system/Header/TaskFocus';
import { Stack, type StackProps } from '@mui/material';

type TaskFocusLayout = {
  children: React.ReactNode;
  slotProps: {
    root?: StackProps<'div'>;
    header: TaskFocusHeaderProps;
  };
};

const TaskFocusLayout = ({ children, slotProps }: TaskFocusLayout) => {
  return (
    <Stack
      {...slotProps.root}
      sx={{
        height: '100%',
        width: '100%',
        backgroundColor: theme => theme.palette.new.background.elements.default,
        ...slotProps.root?.sx,
      }}
    >
      <TaskFocusHeader {...slotProps.header} />
      {children}
    </Stack>
  );
};

export default TaskFocusLayout;