import { Breadcrumb, BreadcrumbItem } from 'tvu-react-pilot'

// BreadcrumbItem renders nothing standalone — it requires a <Breadcrumb> parent.
// Each story composes the full Breadcrumb; that composition IS the item's render.
const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 20, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center', borderRadius: 8 }}>
    {children}
  </div>
)

export const InTrail = () => (
  <Surface>
    <Breadcrumb>
      <BreadcrumbItem href="#" state="Default" showSeparator>Home</BreadcrumbItem>
      <BreadcrumbItem href="#" state="Default" showSeparator>Live</BreadcrumbItem>
      <BreadcrumbItem state="current" showSeparator={false}>Channel 1</BreadcrumbItem>
    </Breadcrumb>
  </Surface>
)

export const ItemStates = () => (
  <Surface>
    <Breadcrumb>
      <BreadcrumbItem href="#" state="Default" showSeparator>Default</BreadcrumbItem>
      <BreadcrumbItem href="#" state="hover" showSeparator>Hover</BreadcrumbItem>
      <BreadcrumbItem state="disabled" showSeparator>Disabled</BreadcrumbItem>
      <BreadcrumbItem state="current" showSeparator={false}>Current</BreadcrumbItem>
    </Breadcrumb>
  </Surface>
)