Settings layout

"use client";
import { useState, type SyntheticEvent } from "react";
import { LuBell, LuBuilding2, LuCreditCard, LuLock, LuPlug, LuUser } from "react-icons/lu";
import {
  Alert,
  Button,
  Card,
  Input,
  Select,
  SelectOption,
  SwitchField,
  TabList,
  TabPanel,
  Tabs,
  VerticalTab,
} from "@nexera-ui/react";

const SECTIONS = [
  { id: "profile", label: "Profile", icon: <LuUser /> },
  { id: "notifications", label: "Notifications", icon: <LuBell /> },
  { id: "security", label: "Security", icon: <LuLock /> },
  { id: "company", label: "Company", icon: <LuBuilding2 /> },
  { id: "billing", label: "Billing", icon: <LuCreditCard /> },
  { id: "integrations", label: "Integrations", icon: <LuPlug /> },
] as const;

/** Settings layout: vertical tabs on the left and the selected section's form on the right. */
export default function SettingsLayout() {
  const [saved, setSaved] = useState(false);
  const onSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSaved(true); // replace with your save request
  };

  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-5xl gap-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">Settings</h2>
          <p className="text-body-default text-secondary">
            Manage your Northwind account and workspace preferences.
          </p>
        </header>
        <Tabs
          orientation="vertical"
          defaultSelectedKey="profile"
          className="grid items-start gap-6 @3xl:grid-cols-[13rem_1fr]"
        >
          <TabList aria-label="Settings sections">
            {SECTIONS.map((section) => (
              <VerticalTab
                key={section.id}
                id={section.id}
                label={section.label}
                icon={section.icon}
              />
            ))}
          </TabList>
          <TabPanel id="profile">
            <Card
              title="Profile"
              titleLevel={3}
              body="How your name and details appear to colleagues."
            >
              <form className="grid gap-4" onSubmit={onSubmit}>
                {saved ? (
                  <Alert
                    tone="success"
                    title="Profile saved"
                    description="This is a demo, so nothing was sent."
                    politeness="polite"
                  />
                ) : null}
                <div className="grid gap-4 @3xl:grid-cols-2">
                  <Input
                    label="First name"
                    name="firstName"
                    autoComplete="given-name"
                    defaultValue="Mia"
                    isRequired
                  />
                  <Input
                    label="Last name"
                    name="lastName"
                    autoComplete="family-name"
                    defaultValue="Jensen"
                    isRequired
                  />
                </div>
                <Input
                  label="Work email"
                  type="email"
                  name="email"
                  defaultValue="mia.jensen@northwind.io"
                  isDisabled
                  description="Managed by your administrator."
                />
                <div className="grid gap-4 @3xl:grid-cols-2">
                  <Input label="Job title" name="title" defaultValue="Product manager" />
                  <Select label="Time zone" name="timezone" defaultValue="cet">
                    <SelectOption id="gmt" label="London (GMT+1)" />
                    <SelectOption id="cet" label="Copenhagen (GMT+2)" />
                    <SelectOption id="pkt" label="Lahore (GMT+5)" />
                    <SelectOption id="jst" label="Tokyo (GMT+9)" />
                  </Select>
                </div>
                <div className="flex flex-wrap justify-end gap-2 border-t border-subtle pt-4">
                  <Button
                    variant="secondary"
                    size="md"
                    type="reset"
                    onPress={() => {
                      setSaved(false);
                    }}
                  >
                    Cancel
                  </Button>
                  <Button size="md" type="submit">
                    Save changes
                  </Button>
                </div>
              </form>
            </Card>
          </TabPanel>
          <TabPanel id="notifications">
            <Card
              title="Notifications"
              titleLevel={3}
              body="Choose what Northwind emails you about."
            >
              <div className="grid gap-2">
                <SwitchField
                  label="Leave requests"
                  description="When someone on your team asks for time off."
                  defaultSelected
                />
                <SwitchField
                  label="Payroll reminders"
                  description="Three days before each pay run closes."
                  defaultSelected
                />
                <SwitchField
                  label="Weekly digest"
                  description="A Monday summary of new joiners and anniversaries."
                />
              </div>
            </Card>
          </TabPanel>
          {SECTIONS.slice(2).map((section) => (
            <TabPanel key={section.id} id={section.id}>
              <Card
                title={section.label}
                titleLevel={3}
                body={`${section.label} settings for the Northwind workspace.`}
              />
            </TabPanel>
          ))}
        </Tabs>
      </div>
    </div>
  );
}