import PropTypes from 'prop-types';

// material-ui
import { useTheme } from '@mui/material/styles';
import { Card, Stack, Typography } from '@mui/material';

// ==============================|| TITLE CARD ||============================== //

const TitleCard = ({ title, secondary, titlesx, secondarysx, starticon, top = { xs: 61, sm: 61 }, sx = {} }) => {
  const theme = useTheme();

  return (
    <Card
      elevation={0}
      sx={{
        position: 'sticky',
        top,
        zIndex: theme.zIndex.appBar - 1,
        py: 2,
        backdropFilter: 'blur(800px)',
        ...sx
      }}
    >
      <Stack direction="row" justifyContent="space-between" alignItems="center" flexWrap="wrap" spacing={1}>
        <Stack direction={'row'} spacing={2} sx={{ ...titlesx }}>
          {starticon && starticon}
          <Typography variant="h3">{title}</Typography>
        </Stack>
        <Stack sx={{ ml: 'auto', ...secondarysx }}>{secondary}</Stack>
      </Stack>
    </Card>
  );
};

TitleCard.propTypes = {
  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
  top: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
  sx: PropTypes.object
};

export default TitleCard;
