import React from 'react'
import { Segmented } from 'antd'
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';

function TabSelector() {
  const { uiPlayerStore } = useStore();
  const currentValue = uiPlayerStore.dataSource;
  const options = [
    { label: 'All Tabs', value: 'all' },
    { label: 'Current Tab', value: 'current' }
  ]

  const onChange = (value: 'all' | 'current') => {
    uiPlayerStore.changeDataSource(value)
  }
  return (
    <Segmented options={options} value={currentValue} onChange={onChange} className='font-medium rounded-lg' size='small'  />
  )
}

export default observer(TabSelector)