import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Tabs } from './index';

export default {
  title: 'App Components/Tabs',
  component: Tabs,
} as ComponentMeta<typeof Tabs>;

const Template: ComponentStory<typeof Tabs> = () => {
  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    {
      title: 'Home',
      index: 0,
    },
    {
      title: 'Upcoming',
      index: 1,
    },
    {
      title: 'My Spaces',
      index: 2,
    },
    {
      title: 'Explore Spaces',
      index: 3,
    },
  ];

  return (
    <SafeAreaProvider>
      <Tabs variant="default" tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />
    </SafeAreaProvider>
  );
};

export const Interactive = Template.bind({});
Interactive.args = {};

export const Variants: ComponentStory<typeof Tabs> = () => {
  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    {
      title: 'Home',
      index: 0,
    },
    {
      title: 'Upcoming',
      index: 1,
    },
    {
      title: 'My Spaces',
      index: 2,
    },
    {
      title: 'Explore Spaces',
      index: 3,
    },
  ];
  return (
    <SafeAreaProvider>
      <Tabs variant="default" tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />
    </SafeAreaProvider>
  );
};

Variants.args = {};