import SynchronisationPanel from '@components/Settings/SynchronisationPanel';

import { TabsWrapper, TabsList, TabsContent } from '@components/ui/Tabs';

export const BitesPanel = () => {
  return (
    <section className="settings-panel">
      <TabsWrapper defaultValue="blockbite">
        <TabsList
          className="max-w-[500px]"
          options={[
            { name: 'blockbite', title: 'Blockbite' },
            { name: 'synchronisation', title: 'Synchronisation' },
          ]}
        ></TabsList>
        <TabsContent value="blockbite">Blockbite</TabsContent>
        <TabsContent value="synchronisation">
          <SynchronisationPanel />
        </TabsContent>
      </TabsWrapper>
    </section>
  );
};

export default BitesPanel;