"use client";

export default function AppSettingsPage() {
  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" }}
        >
          App Settings
        </h1>
        <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
          General configuration for your application.
        </p>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <label style={{ fontSize: "0.9rem", fontWeight: 500 }}>
            App Name
          </label>
          <input
            type="text"
            defaultValue="CampCore"
            style={{
              padding: "10px 14px",
              border: "1px solid #e4e4e7",
              borderRadius: 8,
              fontSize: "0.9rem",
              outline: "none",
            }}
          />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <label style={{ fontSize: "0.9rem", fontWeight: 500 }}>
            Description
          </label>
          <textarea
            rows={3}
            defaultValue="A comprehensive operating system for camp and youth activity providers."
            style={{
              padding: "10px 14px",
              border: "1px solid #e4e4e7",
              borderRadius: 8,
              fontSize: "0.9rem",
              outline: "none",
              resize: "none",
            }}
          />
        </div>

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

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-start",
          }}
        >
          <div>
            <h3
              style={{
                fontSize: "1rem",
                fontWeight: 600,
                margin: "0 0 4px 0",
                color: "#ef4444",
              }}
            >
              Delete Application
            </h3>
            <p style={{ fontSize: "0.85rem", color: "#71717a", margin: 0 }}>
              Permanently delete this app and all of its data.
            </p>
          </div>
          <button
            style={{
              background: "#fee2e2",
              color: "#ef4444",
              border: "1px solid #fca5a5",
              borderRadius: 8,
              padding: "8px 16px",
              fontSize: "0.85rem",
              fontWeight: 600,
              cursor: "pointer",
            }}
          >
            Delete App
          </button>
        </div>
      </div>
    </div>
  );
}
