import { Icon } 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. The surface
// also sets a light `color` so each Icon's default `currentColor` fill is
// visible on the dark background (an unset color would inherit black → invisible).
const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', color: 'var(--text-body)', padding: 20, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center', borderRadius: 8 }}>
    {children}
  </div>
)

// Registry icons resolve by `category/name` (see src/icons/manifest). Default size 16.
export const Common = () => (
  <Surface>
    <Icon name="action/add" />
    <Icon name="action/close" />
    <Icon name="time/clock" />
    <Icon name="action/selected" />
    <Icon name="action/search" />
    <Icon name="action/edit" />
  </Surface>
)

export const Sizes = () => (
  <Surface>
    <Icon name="time/clock" size={16} />
    <Icon name="time/clock" size={24} />
    <Icon name="time/clock" size={32} />
    <Icon name="time/clock" size={48} />
  </Surface>
)