import logoImage from '../assets/logo_image.png'
import logoMark from '../assets/logo_mark_light.png'
import { useTheme } from '../themeContext'
import type { Theme } from '../theme'

interface BillCareLogoProps {
  className?: string
  title?: string
  size?: 'header' | 'login'
  forceTheme?: Theme
}

function isDarkTheme(theme: Theme) {
  return theme === 'dark' || theme === 'blue'
}

/**
 * logo_image.png — 라이트 헤더 가로 로고
 * logo_mark_light.png / logo_image_theme.png — 마크 (로그인·다크 헤더)
 */
export default function BillCareLogo({
  className = '',
  title = 'BillCare',
  size = 'header',
  forceTheme,
}: BillCareLogoProps) {
  const { theme } = useTheme()
  const active = forceTheme ?? theme
  const dark = isDarkTheme(active)
  const root = ['billcare-logo', `billcare-logo--${size}`, `billcare-logo--${active}`, className]
    .filter(Boolean)
    .join(' ')

  // 로그인: 항상 마크 + BillCare (색상은 CSS로 고정)
  if (size === 'login') {
    return (
      <div className={root} title={title}>
        <img src={logoMark} alt="" className="billcare-logo-mark" draggable={false} />
        <span className="billcare-logo-title">{title}</span>
      </div>
    )
  }

  // 라이트 헤더: 가로 로고
  if (!dark) {
    return (
      <img
        src={logoImage}
        alt={title}
        title={title}
        draggable={false}
        className={root}
      />
    )
  }

  // 다크/블루 헤더: 마크 + BillCare
  return (
    <div className={root} title={title}>
      <img src={logoMark} alt="" className="billcare-logo-mark" draggable={false} />
      <span className="billcare-logo-title">{title}</span>
    </div>
  )
}
