web/src/app/(home)/@header/_client/product.tsx

'use client'
import {ReactNode, useState, useEffect, MouseEvent} from 'react'
import Wrap from '@/components/wrap'
import Image from 'next/image'
import anno from '@/assets/header/product/anno.svg'
import Link from 'next/link'
import {merge} from '@/lib/utils'
import prod from '@/assets/header/product/prod.svg'
import custom from '@/assets/header/product/custom.svg'
import {useSearchParams} from 'next/navigation'
import {useRouter} from 'next/navigation'

type TabType = 'domestic' | 'oversea'

export function Tab(props: {
  selected: boolean
  onSelect: () => void
  children: ReactNode
}) {
  return (
    <li role="tab">
      <button
        className={[
          `p-8 text-lg cursor-pointer border-r`,
          props.selected ? `bg-gradient-to-r from-transparent to-blue-200 border-blue-400` : `border-gray-200`,
        ].join(' ')}
        onClick={props.onSelect}
      >
        {props.children}
      </button>
    </li>
  )
}

export default function ProductMenu() {
  const [type, setType] = useState<TabType>('domestic')

  useEffect(() => {
    const checkMobile = () => {
    }

    checkMobile()
    window.addEventListener('resize', checkMobile)
    return () => window.removeEventListener('resize', checkMobile)
  }, [])
  return (
    <Wrap className="flex">
      <ul role="tablist" className="w-48">
        <Tab selected={type === 'domestic'} onSelect={() => setType('domestic')}>国内代理</Tab>
        <Tab selected={type === 'oversea'} onSelect={() => setType('oversea')}>海外代理</Tab>
      </ul>
      <div className="flex-1">
        {type === 'domestic'
          ? (
            <Domestic/>
          ) : (
            <Oversea/>
          )
        }
      </div>
      <aside className="hidden w-64 lg:block">
        <h3 className="flex gap-3 items-center mb-4">
          <Image src={anno} alt="公告" className="w-10 h-10"/>
          <span>网站公告</span>
        </h3>
        <div className="flex flex-col gap-2">
          <p>官网最新上线，体验再升级！</p>
          <p className="text-gray-400 text-sm">
            1.新增多样使用功能，新增多样使用
            新增多样使用功能
          </p>
          <p className="text-gray-400 text-sm">
            2.新增多样使用功能，新增多样使用
            新增多样使用功能
          </p>
        </div>
      </aside>
    </Wrap>
  )
}

export function Domestic(props: {}) {
  const searchParams = useSearchParams()
  const currentType = searchParams?.get('type') || 'short'
  return (
    <section role="tabpanel" className="flex gap-16 mr-16">
      <div className="w-64 flex flex-col">
        <h3 className="mb-6 font-bold flex items-center gap-3">
          <Image src={prod} alt="产品" className="w-10 h-=10"/>
          <span>代理产品</span>
        </h3>

        <DomesticLink
          label="动态IP"
          desc="全国300+城市级定位节点"
          href="/product?type=short"
          discount={45}
          active={currentType === 'short'}
        />
        <DomesticLink
          label="长效静态IP"
          desc="IP 资源覆盖全国"
          href="/product?type=long"
          discount={45}
          active={currentType === 'long'}
        />
        <DomesticLink
          label="固定IP"
          desc="全国300+城市级定位节点"
          href="/product?type=fixed"
          discount={45}
          active={currentType === 'fixed'}
        />
      </div>
      <div className="w-64 flex flex-col gap-4 max-lg:hidden">
        <h3 className="font-bold mb-2 flex items-center gap-3">
          <Image src={custom} alt="定制" className="w-10 h-10"/>
          <span>业务定制</span>
        </h3>
        <div className="flex flex-col gap-2">
          <p>优质/企业/精选IP</p>
          <p className="text-gray-400 text-sm">
            超 1000 家企业共同信赖之选！大客户经理全
            程 1 对 1 沟通，随时为您排忧解难，提供 24
            小时不间断支持
          </p>
        </div>
      </div>
    </section>
  )
}

export function DomesticLink(props: {
  label: string
  desc: string
  href: string
  discount: number
  active?: boolean
}) {
  const router = useRouter()
  // const ctx = useContext(HeaderContext)
  // if (!ctx) {
  //   throw new Error(`HeaderContext not found`)
  // }

  const onClick = (e: MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    // ctx.setMenu(false)
    router.push(props.href)
  }

  return (
    <Link
      href={props.href}
      className={merge(
        `transition-colors duration-150 ease-in-out`,
        `p-4 rounded-lg flex flex-col gap-2 hover:bg-blue-50`,
        props.active ? 'bg-blue-100' : '',
      )}
      onClick={onClick}>
      <p className="flex gap-2">
        <span>{props.label}</span>
        <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
          折扣
          {props.discount}
          %
        </span>
      </p>
      <p className="text-gray-400 text-sm">
        {props.desc}
      </p>
    </Link>
  )
}

export function Oversea(props: {}) {
  return (
    <section role="tabpanel">

    </section>
  )
}