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

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 Primary = () => (
  <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 TwoLevels = () => (
  <Surface>
    <Breadcrumb>
      <BreadcrumbItem href="#" state="Default" showSeparator>Sources</BreadcrumbItem>
      <BreadcrumbItem state="current" showSeparator={false}>SRT Input Pool</BreadcrumbItem>
    </Breadcrumb>
  </Surface>
)

export const States = () => (
  <Surface>
    <Breadcrumb>
      <BreadcrumbItem href="#" state="Default" showSeparator>Home</BreadcrumbItem>
      <BreadcrumbItem href="#" state="hover" showSeparator>Channels</BreadcrumbItem>
      <BreadcrumbItem state="disabled" showSeparator>Archived</BreadcrumbItem>
      <BreadcrumbItem state="current" showSeparator={false}>Studio A</BreadcrumbItem>
    </Breadcrumb>
  </Surface>
)