import { Box, ColorScheme, BoxProps, useComputedColorScheme } from '@tidbcloud/uikit'

import LogoWithTextDark from 'media/logo/tidb-cloud-with-text-2024.dark.svg?react'
import LogoWithText from 'media/logo/tidb-cloud-with-text-2024.svg?react'
import LogoWithoutText from 'media/logo-2024.svg?react'

interface LogoProps extends BoxProps, Omit<React.SVGAttributes<SVGSVGElement>, 'display' | 'opacity' | 'style'> {
  colorScheme?: ColorScheme
  withText?: boolean
}

export const Logo = ({ colorScheme, withText, ...restProps }: LogoProps) => {
  const ctxColorScheme = useComputedColorScheme()
  const scheme = colorScheme || ctxColorScheme
  const isDark = scheme === 'dark'
  const fillColor = isDark ? 'white' : void 0
  const logo = withText ? (isDark ? LogoWithTextDark : LogoWithText) : LogoWithoutText

  return <Box component={logo} height={withText ? 31 : 24} {...restProps} fill={fillColor} title="TiDB Cloud" />
}