import CloseIcon from '@material-hu/icons/material/Close';
import { IconArrowLeft } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

type TeamGoalsHeaderProps = {
  userName: string;
  onClose: () => void;
};

const TeamGoalsHeader = ({ userName, onClose }: TeamGoalsHeaderProps) => {
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        top: 0,
        left: 0,
        backgroundColor: 'new.background.layout.tertiary',
        zIndex: 200,
        px: 2,
        py: 1.5,
        gap: 1,
        position: 'sticky',
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
        }}
      >
        <IconButton
          aria-label="back"
          sx={{ p: 0 }}
          onClick={onClose}
        >
          <IconArrowLeft />
        </IconButton>
        <Typography
          variant="globalL"
          fontWeight="fontWeightSemiBold"
          color="new.text.neutral.default"
        >
          {userName}
        </Typography>
      </Stack>
      <IconButton
        aria-label="close"
        sx={{ p: 0 }}
        onClick={onClose}
      >
        <CloseIcon />
      </IconButton>
    </Stack>
  );
};

export default TeamGoalsHeader;