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

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' },
]

// Previews are static (no state) — pass a fixed `value` matching one 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 Filled = () => (
  <Surface>
    <Tab type="Filled" value="monitor" onChange={() => {}}>
      <TabList type="Filled" items={items} value="monitor" onChange={() => {}} />
    </Tab>
  </Surface>
)