import { MenuList } from 'tvu-react-pilot'

// DS is dark-default (:root tokens). Cards render on white, so wrap every story
// on the DS's own dark surface — mirrors react-pilot App.tsx Card.
const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 24, display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'flex-start', borderRadius: 8 }}>
    {children}
  </div>
)

// Vertical (default) = dropdown / panel body. Active item → brand color +
// trailing `action/selected` checkmark.
export const Vertical = () => (
  <Surface>
    <div style={{ width: 220 }}>
      <MenuList
        orientation="vertical"
        items={[
          { label: 'Live Streams', value: 'live' },
          { label: 'Recordings', value: 'rec', active: true },
          { label: 'Sources', value: 'src' },
          { label: 'Destinations', value: 'dst' },
          { label: 'Archived', value: 'arc', disabled: true },
        ]}
      />
    </div>
  </Surface>
)

// Horizontal = topbar nav. Active item → brand-color underline.
export const Horizontal = () => (
  <Surface>
    <div style={{ width: 520 }}>
      <MenuList
        orientation="horizontal"
        items={[
          { label: 'Dashboard', value: 'dash', active: true },
          { label: 'Channels', value: 'ch' },
          { label: 'Analytics', value: 'an' },
          { label: 'Settings', value: 'set' },
        ]}
      />
    </div>
  </Surface>
)