import { useState } from 'react'
import { TabBar } from '../../ui/Tabs'
import CancellationsLog from './operations/CancellationsLog'
import DiscountsLog from './operations/DiscountsLog'

const TABS = [
  { id: 'cancellations', label: 'Ακυρώσεις', Component: CancellationsLog },
  { id: 'discounts',     label: 'Εκπτώσεις', Component: DiscountsLog },
]

export default function MiscPage() {
  const [active, setActive] = useState('cancellations')
  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>
  )
}