import React from 'react';
import { Stack, Typography, Box } from '@mui/material';
import { useTheme } from '@emotion/react';

const Titlecard = ({ sx, title, children, starticon }) => {
  const theme = useTheme();
  return (
    <Box
      sx={{
        ...sx,
        position: 'sticky',
        top: '60px',
        zIndex: 10, // Make sure it stays above
        backgroundColor: `${theme.palette.border.lighter}`,
        // backgroundColor: 'white',
        py: 2,
        px: 2,
        mt: -1,
        mb: 1
      }}
    >
      <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
        {starticon && starticon}
        <Typography
          variant="h3"
          noWrap
          sx={{
            flex: 1,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
          }}
        >
          {title}
        </Typography>

        {children}
      </Stack>
    </Box>
  );
};

export default Titlecard;
