import React from 'react';
import { SidebarNav } from './components/sidebar-nav';

const sidebarNavItems = [
  {
    title: "Profile",
    href: "/settings",
  },
  {
    title: "Account",
    href: "/settings/account",
  },
  {
    title: "Appearance",
    href: "/settings/appearance",
  },
  {
    title: "Notifications",
    href: "/settings/notifications",
  },
  {
    title: "Display",
    href: "/settings/display",
  },
];

export default function SettingsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex-1 overflow-auto">
      <div className="p-5">
        <div className="mb-6">
          <h1 className="text-2xl font-bold">Settings</h1>
          <p className="text-sm text-gray-500">
            Manage your account settings and set e-mail preferences.
          </p>
        </div>
        <div className="border-t border-gray-200 my-6" />
        <div className="flex flex-col md:flex-row gap-6">
          <div className="w-full md:w-1/4">
            <SidebarNav items={sidebarNavItems} />
          </div>
          <div className="flex-1">{children}</div>
        </div>
      </div>
    </div>
  );
}