import { Badge } 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: 20, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center', borderRadius: 8 }}>
    {children}
  </div>
)

// Badge content is generated INTERNALLY — no children (mirrors App.tsx).
export const CircleColors = () => (
  <Surface>
    <Badge type="Circle" color="Neutral" tag="Filled" />
    <Badge type="Circle" color="Blue" tag="Filled" />
    <Badge type="Circle" color="Green" tag="Filled" />
    <Badge type="Circle" color="Orange" tag="Filled" />
    <Badge type="Circle" color="Red" tag="Filled" />
  </Surface>
)

export const RectangleColors = () => (
  <Surface>
    <Badge type="Rectangle" color="Neutral" tag="Filled" />
    <Badge type="Rectangle" color="Blue" tag="Filled" />
    <Badge type="Rectangle" color="Green" tag="Filled" />
    <Badge type="Rectangle" color="Orange" tag="Filled" />
    <Badge type="Rectangle" color="Red" tag="Filled" />
  </Surface>
)

export const LineTag = () => (
  <Surface>
    <Badge type="Circle" color="Green" tag="Line" />
    <Badge type="Circle" color="Red" tag="Line" />
    <Badge type="Rectangle" color="Blue" tag="Line" />
    <Badge type="Rectangle" color="Orange" tag="Line" />
    <Badge type="Rectangle" color="Neutral" tag="Line" />
  </Surface>
)