import React from 'react';
import { Outlet } from 'react-router-dom';
import SettingsTabs from '../components/SettingsSidebar';
import { Settings } from 'lucide-react';

const SettingsLayout = () => {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
          <Settings className="h-6 w-6" />
          Settings
        </h1>
        <p className="text-muted-foreground mt-1">
          Manage your platform configuration and preferences
        </p>
      </div>

      {/* Tabs Navigation */}
      <SettingsTabs />

      {/* Content Area */}
      <div className="min-w-0">
        <Outlet />
      </div>
    </div>
  );
};

export default SettingsLayout;