import { type ComponentProps } from 'react'
import { cn } from '@/lib'
import logoColor from '@/assets/imarketkorea-logo.png'
import logoWhite from '@/assets/imarketkorea-logo-white.png'

export type LogoVariant = 'color' | 'white'
export type LogoSize = 'sm' | 'md' | 'lg'

const sources: Record<LogoVariant, string> = {
  color: logoColor,
  white: logoWhite,
}

const sizes: Record<LogoSize, { img: string; text: string; gap: string }> = {
  sm: { img: 'h-6', text: 'text-base', gap: 'gap-1.5' },
  md: { img: 'h-8', text: 'text-xl', gap: 'gap-2' },
  lg: { img: 'h-10', text: 'text-2xl', gap: 'gap-2.5' },
}

export interface LogoProps extends Omit<ComponentProps<'div'>, 'children'> {
  variant?: LogoVariant
  size?: LogoSize
  withText?: boolean
  alt?: string
  /** 회사 브랜딩 오버라이드(companies.settings.branding). 없으면 기본 iMarket Korea. */
  serviceName?: string
  logoUrl?: string
}

export function Logo({
  variant = 'color',
  size = 'md',
  withText = true,
  alt = 'iMarket Korea',
  serviceName,
  logoUrl,
  className,
  ...props
}: LogoProps) {
  const s = sizes[size]
  const name = serviceName || 'iMarket Korea'

  return (
    <div className={cn('flex items-center', s.gap, className)} {...props}>
      <img
        src={logoUrl || sources[variant]}
        alt={withText ? '' : (serviceName || alt)}
        className={cn('w-auto select-none', s.img)}
      />
      {withText && (
        <span className={cn('font-bold tracking-[-0.4px] text-foreground', s.text)}>
          {name}
        </span>
      )}
    </div>
  )
}

export default Logo