'use client'

import { useState, ReactNode } from "react"
import Wrap from "@/components/wrap"
import Image from "next/image"
import prod from '@/assets/header/product/prod.svg'
import custom from '@/assets/header/product/custom.svg'
import anno from '@/assets/header/product/anno.svg'

type TabType = 'domestic' | 'oversea'

export default function ProductMenu() {

  const [type, setType] = useState<TabType>('domestic')

  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'
          ? (
            <section role="tabpanel" className="flex gap-16 mr-16">
              <div className="w-64 flex flex-col gap-6">
                <h3 className="font-bold mb-2 flex items-center gap-3">
                  <Image src={prod} alt={`产品`} className={`w-10 h-=10`} />
                  <span>代理产品</span>
                </h3>
                <div className="flex flex-col gap-2">
                  <p className="flex gap-2">
                    <span>短效动态IP</span>
                    <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
                      折扣45%
                    </span>
                  </p>
                  <p className="text-gray-400 text-sm">
                    全国300+城市级定位节点
                  </p>
                </div>
                <div className="flex flex-col gap-2">
                  <p className="flex gap-2">
                    <span>长效静态IP</span>
                    <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
                      折扣45%
                    </span>
                  </p>
                  <p className="text-gray-400 text-sm">
                    IPI资源覆盖全国
                  </p>
                </div>
                <div>
                  <p className="flex gap-2">
                    <span>固定IP</span>
                    <span className="text-orange-500 text-xs text-light px-2 py-1 bg-orange-50 rounded-full">
                      折扣45%
                    </span>
                  </p>
                </div>
              </div>
              <div className="w-64 flex flex-col gap-4">
                <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>
          ) : (
            <section role="tabpanel">

            </section>
          )
        }
      </div>
      <aside className="w-64">
        <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>
  )
}




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>
  )
}