import { type ReactNode } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

type ModulePageHeaderProps = {
  icon: ReactNode;
  title: string;
};

const ModulePageHeader = ({ icon, title }: ModulePageHeaderProps) => (
  <Stack
    sx={{
      flexDirection: 'row',
      alignItems: 'center',
      gap: 2,
    }}
  >
    <Stack
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.brand,
        color: theme => theme.palette.new.text.neutral.brand,
        borderRadius: '50%',
        justifyContent: 'center',
        alignItems: 'center',
        height: 40,
        width: 40,
      }}
    >
      {icon}
    </Stack>
    <Typography
      variant="globalL"
      fontWeight="fontWeightSemiBold"
    >
      {title}
    </Typography>
  </Stack>
);

export default ModulePageHeader;