Settings panel

import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Field,
  FieldDescription,
  FieldLabel,
  Input,
  Label,
  Separator,
  Switch,
  Textarea,
} from "@smaller-earth/ui"

export function SettingsPanel() {
  return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <CardTitle>Account settings</CardTitle>
        <CardDescription>Update your profile, preferences, and notifications.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-8">
        <section className="space-y-4">
          <div>
            <h3 className="text-sm font-medium">Profile</h3>
            <p className="text-sm text-muted-foreground">Shown across the app.</p>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <Field>
              <FieldLabel htmlFor="name">Display name</FieldLabel>
              <Input id="name" defaultValue="Jane Doe" />
            </Field>
            <Field>
              <FieldLabel htmlFor="handle">Handle</FieldLabel>
              <Input id="handle" defaultValue="jane" />
            </Field>
          </div>
          <Field>
            <FieldLabel htmlFor="bio">Bio</FieldLabel>
            <Textarea id="bio" placeholder="Tell people about yourself" />
            <FieldDescription>Up to 140 characters.</FieldDescription>
          </Field>
        </section>
        <Separator />
        <section className="space-y-4">
          <div>
            <h3 className="text-sm font-medium">Notifications</h3>
            <p className="text-sm text-muted-foreground">We'll only email the things that matter.</p>
          </div>
          <div className="space-y-3">
            <div className="flex items-center justify-between gap-4">
              <div className="space-y-1">
                <Label htmlFor="weekly">Weekly digest</Label>
                <p className="text-sm text-muted-foreground">Summary of activity every Monday.</p>
              </div>
              <Switch id="weekly" defaultChecked />
            </div>
            <div className="flex items-center justify-between gap-4">
              <div className="space-y-1">
                <Label htmlFor="mentions">Mentions</Label>
                <p className="text-sm text-muted-foreground">Email me when someone @ me.</p>
              </div>
              <Switch id="mentions" />
            </div>
          </div>
        </section>
        <div className="flex items-center justify-end gap-2">
          <Button variant="ghost">Cancel</Button>
          <Button>Save changes</Button>
        </div>
      </CardContent>
    </Card>
  )
}