Account Settings

import { AccountSettings } from "@/components/ui/account-settings";

export default function Example() {
  return <AccountSettings />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const AccountSettings = forwardRef(({ className, user = {}, onSave, ...props }, ref) => {
  const [form, setForm] = useState({ name: user.name || "", email: user.email || "", bio: user.bio || "" });
  const update = (key) => (e) => setForm({ ...form, [key]: e.target.value });

  return (
    <div ref={ref} className={cn("mx-auto w-full max-w-lg space-y-6", className)} {...props}>
      <div>
        <h2 className="text-xl font-bold">Account Settings</h2>
        <p className="text-sm text-muted-foreground">Manage your account information</p>
      </div>
      <div className="space-y-4 rounded-lg border p-6">
        <div className="space-y-2">
          <label className="text-sm font-medium">Display Name</label>
          <input type="text" value={form.name} onChange={update("name")}
            className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
          />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium">Email</label>
          <input type="email" value={form.email} onChange={update("email")}
            className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
          />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium">Bio</label>
          <textarea value={form.bio} onChange={update("bio")} rows={3}
            className="flex w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
          />
        </div>
        <button onClick={() => onSave?.(form)}
          className="inline-flex h-10 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90"
        >Save Changes</button>
      </div>
    </div>
  );
});
AccountSettings.displayName = "AccountSettings";

export { AccountSettings };