import React from 'react';
import { useTheme } from '@mui/material/styles';
import { CardActions, Grid, Stack, Typography } from '@mui/material';

const TitleCard = ({ title, secondary, sx }) => {
  const theme = useTheme();

  return (
    <CardActions
      sx={{
        position: 'sticky',
        top: '30px',
        bgcolor: theme.palette.background.default,
        zIndex: 10,
        width: '100%',
        ...sx
      }}
    >
      <Grid container>
        <Grid item xs={12}>
          <Stack direction="row" justifyContent="space-between" alignItems="center" gap={2} sx={{ flexWrap: 'wrap' }}>
            <Typography variant="h3">{title}</Typography>
            {secondary}
          </Stack>
        </Grid>
      </Grid>
    </CardActions>
  );
};

export default TitleCard;