import { NavBar, SpinLoading } from 'antd-mobile';
import './Bluetooth.scss';

export default function Bluetooth() {
  return (
    <div>
      <NavBar className="bg-white" back={null}>
        蓝牙
      </NavBar>
      <div className="home-page-content overflow-x-hidden overflow-y-auto">
        <section>
          <div className="h-[42px] px-5">
            <h1 className="h-[42px] leading-[42px] text-base text-text font-medium">已配对设备</h1>
          </div>
          <div className="bg-white px-5 text-sm text-text">
            <div className="h-12 flex justify-between items-center border-b border-[#eee]">
              <span>设备名</span>
              <span>已连接</span>
            </div>
            <div className="h-12 flex justify-between items-center border-b border-[#eee]">
              <span>设备名</span>
              <span></span>
            </div>
          </div>
        </section>

        <section>
          <div className="h-[42px] px-5 flex items-center justify-between">
            <h1 className="h-[42px] leading-[42px] text-base text-text font-medium">附近设备</h1>
            <SpinLoading />
          </div>
          <div className="bg-white px-5 text-sm text-text">
            <div className="h-12 flex justify-between items-center border-b border-[#eee]">
              <span>设备1</span>
            </div>
            <div className="h-12 flex justify-between items-center border-b border-[#eee]">
              <span>设备2</span>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}
