import Box from '@mui/material/Box'
import type { SxProps, Theme } from '@mui/material/styles'
import type { ColorScheme } from '@/shared/model/theme'

const HUE_ROTATE: Record<ColorScheme, string> = {
  craft: 'none',
  forest: 'hue-rotate(-65deg) saturate(1.3)',
  ocean: 'hue-rotate(-25deg) saturate(1.15)',
  berry: 'hue-rotate(80deg) saturate(1.1)',
}

type BearLogoProps = {
  scheme?: ColorScheme
  sx?: SxProps<Theme>
}

export function BearLogo({ scheme, sx }: BearLogoProps) {
  const filter = scheme ? HUE_ROTATE[scheme] : undefined

  return (
    <Box
      component="img"
      src="/logo.webp"
      alt=""
      width={35}
      height={35}
      sx={{
        objectFit: 'contain',
        ...(filter && filter !== 'none' ? { filter } : {}),
        ...sx,
      }}
    />
  )
}
