'use client'

/**
 * LocaleSwitcher
 *
 * Simple SV / EN text switcher with fade transition.
 * NOT wired into nav yet — import when EN content is ready.
 *
 * Usage in Nav/index.tsx when ready:
 *   import { LocaleSwitcher } from '@/components/LocaleSwitcher'
 *   <LocaleSwitcher />
 */

import { usePathname } from 'next/navigation'
import Link from 'next/link'

export function LocaleSwitcher() {
  const pathname = usePathname()
  const isEN = pathname.startsWith('/en')

  const alternatePath = isEN
    ? pathname.replace(/^\/en/, '') || '/'
    : `/en${pathname === '/' ? '' : pathname}`

  return (
    <Link
      href={alternatePath}
      className="
        relative inline-flex items-center
        font-joey-medium text-sm tracking-wide
        text-fd-navy dark:text-white
        hover:text-fd-yellow dark:hover:text-fd-yellow
        transition-colors duration-200
      "
      aria-label={isEN ? 'Byt till svenska' : 'Switch to English'}
    >
      <span
        className={`
          transition-opacity duration-200
          ${isEN ? 'opacity-100' : 'opacity-0 absolute'}
        `}
      >
        SV
      </span>
      <span
        className={`
          transition-opacity duration-200
          ${!isEN ? 'opacity-100' : 'opacity-0 absolute'}
        `}
      >
        EN
      </span>
    </Link>
  )
}