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

const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 20, display: 'flex', gap: 16, flexDirection: 'column', alignItems: 'flex-start', borderRadius: 8 }}>
    {children}
  </div>
)

// Static preview — fixed current page.
export const Classic = () => (
  <Surface>
    <Pagination type="Classic" total={120} pageSize={10} value={3} onChange={() => {}} />
  </Surface>
)

export const Simple = () => (
  <Surface>
    <Pagination type="Simple" total={120} pageSize={10} value={3} onChange={() => {}} />
  </Surface>
)

export const Small = () => (
  <Surface>
    <Pagination type="Small" total={120} pageSize={10} value={3} onChange={() => {}} />
  </Surface>
)