<script>
  import Tabs from "$/client/components/Tabs.svelte";
  import Calendar from "./Calendar.svelte";
  import Cards from "./Cards.svelte";
  import Login from "./Login.svelte";
  import { log } from "$/client/logging.js";

  export let panels = [
    {title: "Calendar", active: true, icon: "calendar", component: Calendar},
    {title: "Cards", active: false, icon: "credit-card", component: Cards},
    {title: "Login", active: false, icon: "log-in", component: Login},
  ];

  let selected = panels[0];

  const tab_select = (event) => {
    log.debug("SELECTED TAB", event.detail);
  }
</script>

<Tabs panels={ panels } on:select={ tab_select } bind:selected vertical={true} />
