import React from 'react';
import { Outlet } from 'react-router-dom';
import { SecondaryNavigation } from '../navigation/SecondaryNavigation';
import { Breadcrumbs } from '../navigation/Breadcrumbs';
import { usePermissions } from '../../hooks/usePermissions';

const SettingsLayout: React.FC = () => {
  const { hasRole } = usePermissions();

  const getNavigationItems = () => {
    const baseItems = [
      {
        id: 'general',
        label: 'General',
        href: '/app/settings/general',
        icon: 'Settings'
      },
      {
        id: 'account',
        label: 'Cuenta',
        href: '/app/settings/account',
        icon: 'User'
      }
    ];

    // Add admin-only items
    if (hasRole('admin')) {
      baseItems.unshift(
        {
          id: 'bakeries',
          label: 'Panaderías',
          href: '/app/settings/bakeries',
          icon: 'Building'
        },
        {
          id: 'users',
          label: 'Usuarios',
          href: '/app/settings/users',
          icon: 'Users'
        }
      );
    }

    return baseItems;
  };

  return (
    <div className="flex flex-col h-full">
      <div className="bg-white border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <Breadcrumbs />
          <SecondaryNavigation items={getNavigationItems()} />
        </div>
      </div>
      
      <div className="flex-1 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <Outlet />
        </div>
      </div>
    </div>
  );
};

export default SettingsLayout;