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

// TabItem requires the Tab context (provide/inject) — author it inside <Tab>/<TabList>.
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>
)

// Static preview — the active item is fixed via Tab `value`.
export const Line = () => (
  <Surface>
    <Tab type="Line" value="overview" onChange={() => {}}>
      <TabList type="Line" value="overview" onChange={() => {}}>
        <TabItem type="Line" value="overview" property1="Active">Overview</TabItem>
        <TabItem type="Line" value="sources" property1="Normal">Sources</TabItem>
        <TabItem type="Line" value="monitor" property1="Normal">Monitor</TabItem>
      </TabList>
    </Tab>
  </Surface>
)

export const Filled = () => (
  <Surface>
    <Tab type="Filled" value="sources" onChange={() => {}}>
      <TabList type="Filled" value="sources" onChange={() => {}}>
        <TabItem type="Filled" value="overview" property1="Normal">Overview</TabItem>
        <TabItem type="Filled" value="sources" property1="Active">Sources</TabItem>
        <TabItem type="Filled" value="monitor" property1="Normal">Monitor</TabItem>
      </TabList>
    </Tab>
  </Surface>
)

export const WithDisabled = () => (
  <Surface>
    <Tab type="Line" value="overview" onChange={() => {}}>
      <TabList type="Line" value="overview" onChange={() => {}}>
        <TabItem type="Line" value="overview" property1="Active">Overview</TabItem>
        <TabItem type="Line" value="sources" property1="Normal">Sources</TabItem>
        <TabItem type="Line" value="archived" property1="Normal" disabled>Archived</TabItem>
      </TabList>
    </Tab>
  </Surface>
)