import React, { useState } from 'react';
import { Box } from '../box/index.js';
import Tab from './tab.jsx';
import Tabs from './tabs.jsx';
export default {
  title: 'DesignSystem/Atoms/Tabs'
};
const Template = () => {
  const [selectedTab, setSelectedTab] = useState('first');
  return /*#__PURE__*/React.createElement(Tabs, {
    currentTab: selectedTab,
    onChange: setSelectedTab
  }, /*#__PURE__*/React.createElement(Tab, {
    id: "first",
    label: "First tab"
  }, /*#__PURE__*/React.createElement(Box, {
    width: 700,
    height: 500
  }, "First")), /*#__PURE__*/React.createElement(Tab, {
    id: "second",
    label: "Second tab"
  }, "Second"), /*#__PURE__*/React.createElement(Tab, {
    id: "third",
    label: "Third tab"
  }, "Third"));
};
export const Default = Template.bind({});