import { Grid, alpha } from '@mui/material'
import styled from '@emotion/styled'
import LeftContainer from './atom/LeftContainer'
import RightContainer from './atom/RightContainer'
import type { Theme } from '@mui/material'

const Header = styled('header')(({ theme }) => {
  const t = theme as Theme
  return {
    position: 'sticky',
    top: 0,
    transition: t.transitions.create('top'),
    zIndex: t.zIndex.appBar,
    backdropFilter: 'blur(20px)',
    boxShadow: `inset 0px -1px 1px ${
      t.palette.mode === 'dark' ? t.palette.yacolor.bg.dark : t.palette.grey[100]
    }`,
    backgroundColor: alpha(t.palette.yacolor.bg[t.palette.mode], 0.98),
  }
})

const NavContainer = styled('nav')(() => ({
  display: 'flex',
  alignItems: 'center',
  minHeight: '56px',
  maxWidth: '100%',
  padding: '0 1rem',
}))

const YaHeader: React.FC = () => {
  return (
    <Header>
      <NavContainer>
        <Grid container alignItems="center">
          <LeftContainer />
          <RightContainer />
        </Grid>
      </NavContainer>
    </Header>
  )
}

export default YaHeader