import {
  AppBar,
  Avatar,
  Box,
  IconButton,
  Link,
  ListItemText,
  Typography,
  alpha,
  styled,
} from '@mui/material'
import { Link as RouterLink } from 'react-router-dom'

export const StyledImageWrapper = styled('div')`
  width: auto;
  height: 34px;
  & img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`

export const StyledItemText = styled(ListItemText)(({ theme }) => ({
  color: theme.palette.text.primary,
  transition: '0.2s ease',
}))

export const StyledAppBar = styled(AppBar)(({ theme }) => ({
  backgroundColor: 'white',
  boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
}))

export const StyledHeader = styled(Box)(({ theme }) => ({
  boxShadow: '0px 2px 10px #0000001a',
  backgroundColor: 'white',
  display: 'flex',
  alignItems: 'center',
  height: '96px',
  justifyContent: 'space-between',
  '& .actions': {
    marginRight: '20px',
    display: 'flex',
    alignItems: 'center',
    gap: '14px',
  },
}))

export const StyledUser = styled(Box)(({ theme }) => ({
  cursor: 'pointer',
  borderRadius: '5px',
  transition: 'background 0.2s ease',
  padding: '5px 16px',
  display: 'flex',
  alignItems: 'center',
  gap: '8px',
  '&:hover': {
    background: theme.palette.secondary.light,
  },
}))

export const StyledIconButton = styled(IconButton)({
  padding: '20px',
  backgroundColor: 'black',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: '0px',
  border: '1px solid white',
})

export const StyledLink = styled(Link)({
  textDecoration: 'none',
})

export const StyledDescription = styled(Typography)(({ theme }) => ({
  fontSize: '12px',
  fontWeight: 600,
  color: alpha(theme?.palette?.secondary?.lighter, 0.5),
}))

export const StyledMenuItem = styled(Box)({
  height: '68px',
  width: '380px',
  padding: '40px 20px',
  transition: 'background ease 0.3s',
  '&:hover': {
    background: 'rgba(0, 0, 0, 0.03)',
  },
  display: 'flex',
  alignItems: 'center',
  gap: '20px',
})

export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
  cursor: 'pointer',

  padding: '8px 0px',

  borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
}))

export const StyledAvatar = styled(Avatar)(({ theme }) => ({
  background: theme.palette.secondary.main,
  cursor: 'pointer',
  height: '45px',
  width: '45px',
}))

export const StyledLogosWrapper = styled(Box)(() => ({
  display: 'flex',
  alignItems: 'center',
  gap: '10px',
  padding: '10px',
  transition: 'background ease 0.3s',
  borderRadius: '5px',
  '&:hover': {
    background: 'rgba(0, 0, 0, 0.05)',
  },
}))

export const StyledImageBox = styled(Box)(() => ({
  height: '40px',
  width: '40px',
  boxShadow: '0px 5px 5px 0px rgba(48, 62, 99,0.1) ',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: '5px',
}))

export const StyledRouterLink = styled(RouterLink)(() => ({
  textDecoration: 'none',
}))
