'use client'

import Image from '@/framework/image'
import { Group, Text, Badge } from '@pikku/mantine/core'
import Link from '@/framework/link'
import { useParams, usePathname } from '@/framework/navigation'
import { DEFAULT_LOCALE } from '@/config'
import { useI18n } from '@/context/i18n-provider'
import { asI18n } from '@pikku/react'

interface LogoProps {
  size?: 'sm' | 'md' | 'lg'
  showBeta?: boolean
  type?: string
}

export default function Logo({ size = 'md', showBeta = true, type }: LogoProps) {
  const t = useI18n()
  const dimensions = {
    sm: { width: 24, height: 24, textSize: 'lg' as const },
    md: { width: 32, height: 32, textSize: 'xl' as const },
    lg: { width: 40, height: 40, textSize: 'xl' as const }
  }

  const { width, height, textSize } = dimensions[size]
  const pathname = usePathname()
  const { lang } = useParams<{ lang?: string }>()
  const homeHref = lang ? `/${lang}` : pathname.startsWith('/pilot') ? '/de' : `/${DEFAULT_LOCALE}`

  return (
    <Group gap="xs" align="center">
      <Link href={homeHref}>
        <Image
          src="/heygermany-logo-small.png"
          alt="HeyGermany logo"
          width={width}
          height={height}
        />
      </Link>
      <Text size={textSize} fw={500}>
        {t('logo.wordmark')}
      </Text>
      {type && <Badge variant="light" color="primary">{asI18n(type)}</Badge>}
      {!type && showBeta && <Text size="xs" c="gray.8">{t('layout.topbar.beta')}</Text>}
    </Group>
  )
}