Settings layout

"use client"

import * as React from "react"
import { Bell, CreditCard, KeyRound, Plug, UserRound, Users } from "lucide-react"
import { SettingsLayout, SettingsSection, type SettingsGroup } from "@/components/settings-layout"

const groups: SettingsGroup[] = [
  {
    label: "You",
    items: [
      { id: "profile", label: "Profile", Icon: UserRound },
      { id: "notifications", label: "Notifications", Icon: Bell },
    ],
  },
  {
    label: "Workspace",
    items: [
      { id: "members", label: "Members", Icon: Users },
      { id: "connections", label: "Connections", Icon: Plug },
      { id: "keys", label: "API keys", Icon: KeyRound },
      { id: "billing", label: "Billing", Icon: CreditCard, locked: "Only owners can see billing" },
    ],
  },
]

const sections: Record<string, { title: string; description: string; body: string }> = {
  profile: { title: "Profile", description: "How you appear to your team.", body: "Name, avatar and time zone." },
  notifications: { title: "Notifications", description: "What Keel tells you about, and where.", body: "Approvals and failed runs always notify you." },
  members: { title: "Members", description: "Who can use Keel in Acme.", body: "8 members, 2 pending invites." },
  connections: { title: "Connections", description: "Repositories and databases the agents can reach.", body: "GitHub, Production and Staging databases." },
  keys: { title: "API keys", description: "Keys for calling Keel from CI.", body: "No keys yet." },
}

export default function Example() {
  const [active, setActive] = React.useState("connections")
  const s = sections[active]!
  return (
    <div className="flex h-[420px] overflow-hidden rounded-lg border">
      <SettingsLayout groups={groups} active={active} onSelect={setActive}>
        <SettingsSection title={s.title} description={s.description}>
          <p className="text-sm">{s.body}</p>
        </SettingsSection>
      </SettingsLayout>
    </div>
  )
}