"use client";

export default function AuthSettingsPage() {
  return (
    <div
      style={{
        padding: "32px 48px",
        fontFamily: '"Outfit", "Inter", sans-serif',
        color: "#18181b",
        maxWidth: 900,
      }}
    >
      <div style={{ marginBottom: 24 }}>
        <h1
          style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
        >
          Authentication
        </h1>
        <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
          Configure how users sign in to your app.
        </p>
      </div>

      <div
        style={{
          background: "#fff",
          border: "1px solid #e4e4e7",
          borderRadius: 12,
          padding: "24px",
          marginBottom: 24,
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: 16,
          }}
        >
          <div>
            <div
              style={{ fontSize: "0.95rem", fontWeight: 600, marginBottom: 4 }}
            >
              Email & Password
            </div>
            <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
              Allow users to sign up with an email and password.
            </div>
          </div>
          <div
            style={{
              width: 44,
              height: 24,
              background: "#18181b",
              borderRadius: 12,
              position: "relative",
              cursor: "pointer",
            }}
          >
            <div
              style={{
                width: 20,
                height: 20,
                background: "#fff",
                borderRadius: "50%",
                position: "absolute",
                right: 2,
                top: 2,
              }}
            ></div>
          </div>
        </div>

        <div style={{ borderTop: "1px solid #e4e4e7", margin: "16px 0" }}></div>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div>
            <div
              style={{ fontSize: "0.95rem", fontWeight: 600, marginBottom: 4 }}
            >
              Google OAuth
            </div>
            <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
              Allow users to sign in with their Google account.
            </div>
          </div>
          <div
            style={{
              width: 44,
              height: 24,
              background: "#e4e4e7",
              borderRadius: 12,
              position: "relative",
              cursor: "pointer",
            }}
          >
            <div
              style={{
                width: 20,
                height: 20,
                background: "#fff",
                borderRadius: "50%",
                position: "absolute",
                left: 2,
                top: 2,
                boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
              }}
            ></div>
          </div>
        </div>
      </div>
    </div>
  );
}
