import { useState } from 'react'
import { ShoppingBag, LayoutGrid, Users } from 'lucide-react'
import ProductsTab from './Management/ProductsTab'
import TablesConfigTab from './TablesConfigTab'
import StaffTab from './StaffTab'
import { TabGroup } from '../ui/Tabs'

const TABS = [
  { id: 'products', label: 'Προϊόντα', icon: ShoppingBag },
  { id: 'tables',   label: 'Τραπέζια', icon: LayoutGrid },
  { id: 'staff',    label: 'Προσωπικό', icon: Users },
]

export default function ManagementPage() {
  const [activeTab, setActiveTab] = useState('products')

  return (
    <div className="flex flex-col h-full min-h-0">
      <TabGroup tabs={TABS} active={activeTab} onChange={setActiveTab} />
      <div className="flex-1 min-h-0">
        {activeTab === 'products' && <ProductsTab />}
        {activeTab === 'tables'   && <TablesConfigTab />}
        {activeTab === 'staff'    && <StaffTab />}
      </div>
    </div>
  )
}