import React from 'react'
import { Link, useLocation } from 'react-router-dom'

export const Header: React.FC = () => {
  const location = useLocation()
  const isShelf = location.pathname === '/' || location.pathname.startsWith('/books')

  return (
    <header className="sticky top-0 z-20">
      <div className="relative">
        <div
          className={
            (isShelf ? 'bg-transparent' : 'bg-transparent') +
            ' border-b border-black/5'
          }
          style={{
            backdropFilter: 'blur(14px)',
          }}
        >
          <div className="container mx-auto px-4 py-4">
            <div className="flex items-center justify-between gap-4">
              <Link
                to="/"
                className={
                  (isShelf ? 'text-[color:var(--text)]' : 'text-[color:var(--text)]') +
                  ' text-xl sm:text-2xl font-bold tracking-tight'
                }
                aria-label="返回书架"
              >
                <span className="font-display">书架</span>
                <span className={'text-[color:var(--muted)] ml-2 text-sm font-semibold'}>
                  Library
                </span>
              </Link>

              <nav className="flex items-center gap-3 sm:gap-4">
                <Link
                  to="/"
                  className={
                    (isShelf
                      ? 'text-[color:var(--muted)] hover:text-[color:var(--text)]'
                      : 'text-[color:var(--muted)] hover:text-[color:var(--text)]') +
                    ' text-sm font-semibold transition-colors'
                  }
                >
                  书架
                </Link>
                <Link
                  to="/categories"
                  className={
                    (isShelf
                      ? 'text-[color:var(--muted)] hover:text-[color:var(--text)]'
                      : 'text-[color:var(--muted)] hover:text-[color:var(--text)]') +
                    ' text-sm font-semibold transition-colors'
                  }
                >
                  分类
                </Link>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}