import { useProp, useEvent, h } from 'atomico';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-loading.js';

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-tabs/kun-tabs.tsx";






const style = `
    .horizontal {
        display: flex;
        flex-direction: row;
    }
    
    .mt-18 {
        margin-top: 24px
    }
    .vertical {
        display:flex;
        flex-direction:column;
    }
    `;

const WebComponent1 = () => {
  const [tabs] = useProp("tabs");
  const onClickTab = useEvent("MyTab", {
    bubbles: true,
    composed: true,
  });

  const clickD = (name) => {
    onClickTab({ key: name });
  };

  return (
    h('host', { shadowDom: true, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 40}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 41}}, style)
      , h('div', { className: "vertical", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 42}}
        , h('div', { className: "flex inline-flex justify-start"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 43}}
          , 
                        tabs.map((tab) => (
                          h('kun-tab', {
                            key: tab.key,
                            selected: tab.selected,
                            message: tab.name,
                            onclick: () => clickD(tab.key), __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 46}}
                          )
                        ))
                    
        )
        , h('div', { className: "mt-18", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 55}}
          , h('slot', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 56}} )
        )
      )
    )
  );
};

WebComponent1.props = {
  tabs: {
    type: Array,
    value: [
      {
        key: "learning",
        name: "正在学习",
        selected: true,
      },
      {
        key: "plan",
        name: "学习计划",
        selected: false,
      },
    ],
  },
};

var kunTabs = getComponentOrDefine("kun-tabs", WebComponent1);

export default kunTabs;
