import { useState } from 'react'
import { TabBar } from '../../ui/Tabs'
import PrinterHistory from './operations/PrinterHistory'
import PrinterHealthLog from './operations/PrinterHealthLog'

const TABS = [
  { id: 'printer-history', label: 'Ιστορικό Εκτυπωτή', Component: PrinterHistory },
  { id: 'printer-health',  label: 'Υγεία Εκτυπωτή',    Component: PrinterHealthLog },
]

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