"use client";

export default function SettingModal({
  visible,
  onClose,
}: {
  visible: boolean;
  onClose: () => void;
}) {
  // 如果不显示，直接 return null
  if (!visible) return null;

  return (
    // 全屏遮罩
    <div className="fixed inset-0 z-50 bg-black/50">
      {/* 弹框主体 - 从底部滑上来 */}
      <div className="absolute bottom-0 left-0 right-0 w-full h-full bg-white rounded-t-2xl overflow-auto">
        <div className="flex flex-col">
          {/* 顶部导航 */}
          <header className="bg-black text-white py-4 px-4 flex items-center">
            <button onClick={onClose} className="mr-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 19l-7-7 7-7"
                />
              </svg>
            </button>
            <h1 className="text-lg font-medium">Setting</h1>
          </header>

          {/* 头像区域 */}
          <div className="bg-[#FFF5F0] py-8 flex flex-col items-center">
            <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center border-2 border-black">
              <span className="text-black font-bold text-lg">LOGO</span>
            </div>
          </div>

          {/* 菜单列表 */}
          <div className="px-4 py-2">
            {/* Information */}
            <div className="py-4 border-b border-gray-100 flex justify-between items-center">
              <span className="text-black font-medium">Information</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-5 w-5 text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </div>

            {/* Subscribe 开关 */}
            <div className="py-4 border-b border-gray-100 flex justify-between items-center">
              <span className="text-black font-medium">Subscribe</span>
              <div className="relative w-12 h-6 rounded-full bg-black">
                <div className="absolute right-0.5 top-0.5 w-5 h-5 bg-white rounded-full"></div>
              </div>
            </div>

            {/* Log Out */}
            <div className="py-4 border-b border-gray-100">
              <button className="text-black font-medium w-full text-left">
                Log Out
              </button>
            </div>
          </div>

          {/* 版本号 */}
          <div className="py-6 text-center text-gray-400 text-sm">v1.1.0</div>
        </div>
      </div>
    </div>
  );
}