import { useState } from 'react'
import { TabBar } from '../../ui/Tabs'
import ProductPerformance from './restaurant/ProductPerformance'
import CategoryPerformance from './restaurant/CategoryPerformance'

const TABS = [
  { id: 'products',   label: 'Απόδοση Προϊόντων', Component: ProductPerformance },
  { id: 'categories', label: 'Κατηγορίες',         Component: CategoryPerformance },
]

export default function ProductsReportPage() {
  const [active, setActive] = useState('products')
  const tab = TABS.find(t => t.id === active) || TABS[0]
  const { Component } = tab

  return (
    <div className="flex flex-col h-full min-h-0">
      <TabBar tabs={TABS} active={active} onChange={setActive} />
      <div className="flex-1 min-h-0 flex flex-col">
        <Component key={active} />
      </div>
    </div>
  )
}
