import { Tab, TabList } from 'tvu-react-pilot'

// TabList requires a <Tab> parent (provide/inject) — author it inside <Tab>.
const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 20, display: 'flex', gap: 16, flexDirection: 'column', alignItems: 'flex-start', borderRadius: 8 }}>
    {children}
  </div>
)

const items = [
  { label: 'Overview', value: 'overview' },
  { label: 'Sources', value: 'sources' },
  { label: 'Monitor', value: 'monitor' },
]

// Static preview — fixed `value` matches an item.
export const Line = () => (
  <Surface>
    <Tab type="Line" value="overview" onChange={() => {}}>
      <TabList type="Line" items={items} value="overview" onChange={() => {}} />
    </Tab>
  </Surface>
)

export const Text = () => (
  <Surface>
    <Tab type="Text" value="sources" onChange={() => {}}>
      <TabList type="Text" items={items} value="sources" onChange={() => {}} />
    </Tab>
  </Surface>
)

export const WithDisabled = () => (
  <Surface>
    <Tab type="Line" value="overview" onChange={() => {}}>
      <TabList
        type="Line"
        items={[
          { label: 'Overview', value: 'overview' },
          { label: 'Sources', value: 'sources' },
          { label: 'Archived', value: 'archived', disabled: true },
        ]}
        value="overview"
        onChange={() => {}}
      />
    </Tab>
  </Surface>
)