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

const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 20, borderRadius: 8, display: 'inline-block' }}>
    {children}
  </div>
)

// Realistic TVU streaming data shapes — copied from App.tsx.
const share = { labels: ['Live', 'Idle', 'Error'], datasets: [{ label: 'Channels', data: [6, 3, 1] }] }
const trend = { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], datasets: [{ label: 'Streams', data: [12, 19, 8, 15, 22] }] }
const trafficByChannel = { labels: ['Direct', 'Organic', 'Paid', 'Social', 'Referral'], datasets: [{ label: 'Visits', data: [30, 45, 15, 25, 10] }] }
const mixed = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  datasets: [
    { label: 'Revenue', data: [100, 120, 90, 150, 130], type: 'bar' as const },
    { label: 'Trend', data: [105, 115, 108, 125, 130], type: 'line' as const },
  ],
}

export const Pie = () => (
  <Surface>
    <Chart type="pie" labels={share.labels} datasets={share.datasets} width={260} height={200} />
  </Surface>
)

export const Donut = () => (
  <Surface>
    <Chart type="donut" labels={share.labels} datasets={share.datasets} width={260} height={200} />
  </Surface>
)

export const Line = () => (
  <Surface>
    <Chart type="line" labels={trend.labels} datasets={trend.datasets} width={300} height={200} />
  </Surface>
)

export const Bar = () => (
  <Surface>
    <Chart type="bar" labels={trend.labels} datasets={trend.datasets} width={300} height={200} />
  </Surface>
)

export const BarHorizontal = () => (
  <Surface>
    <Chart type="bar-horizontal" labels={trafficByChannel.labels} datasets={trafficByChannel.datasets} width={300} height={200} />
  </Surface>
)

export const LineBar = () => (
  <Surface>
    <Chart type="line-bar" labels={mixed.labels} datasets={mixed.datasets} width={300} height={200} />
  </Surface>
)