import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
import { IconButton, Stack } from '@mui/material'
import { ReactNode } from 'react'
import { useNavigate } from 'react-router-dom'
import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
import CogWheelMenu from './CogWheelMenu'
import UserBox from './UserBox'

const profileMenu = [
  { label: 'Student Results', path: '/results' },
  { label: 'Careers', path: '/careers' },
]

export default function HeaderActions({
  cogWheelMenu,
  fullName,
  userBoxActions,
  profileUrl = '',
  actions = [],
  profileSx = {},
}: {
  cogWheelMenu?: any[]
  fullName: string
  userBoxActions: IMenuItemProps[] | []
  profileUrl: string
  actions?: ReactNode[]
  profileSx?: any
}) {
  const navigate = useNavigate()
  return (
    <Stack direction="row" gap={6}>
      <InstitutionsDropDown />
      {/* <SearchButton /> */}
      {/* <FreshDeskHelpButton /> */}
      <Stack direction="row" gap={2}>
        <IconButton
          href={'https://campx.atlassian.net/servicedesk/customer/portal/2'}
          target="_blank"
          sx={{ color: 'black', padding: '0px' }}
        >
          <HelpOutlineIcon />
        </IconButton>

        {actions.map((action, index) => action)}
        {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
        <UserBox
          fullName={fullName}
          actions={userBoxActions}
          profileUrl={profileUrl}
          profileSx={profileSx}
        />
      </Stack>
    </Stack>
  )
}
