<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { ref } from "vue";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/Components/ui/tabs";
import ActionTable from "../Partials/ActionTable.vue";
import DecisionTable from "../Partials/DecisionTable.vue";

const props = defineProps({
  actions: Array,
  decisions: Array,
  segments: Array,
  email_templates: { type: Array, default: () => [] },
  events: { type: Array, default: () => [] },
  archive_settings: { type: Array, default: () => [] },
});

const activeTab = ref("actions");
</script>
<template>
  <AppLayout title="Workflow">
    <template #header></template>
    <div class="pt-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <Tabs v-model="activeTab" class="w-full">
            <TabsList class="w-full justify-start border-b rounded-none bg-transparent p-0">
              <TabsTrigger value="actions" class="rounded-none border-b-2 border-transparent data-[state=active]:border-primary">Akcije</TabsTrigger>
              <TabsTrigger value="decisions" class="rounded-none border-b-2 border-transparent data-[state=active]:border-primary">Odločitve</TabsTrigger>
            </TabsList>
            <TabsContent value="actions" class="mt-0">
              <ActionTable
                :actions="actions"
                :decisions="decisions"
                :segments="segments"
              />
            </TabsContent>
            <TabsContent value="decisions" class="mt-0">
              <DecisionTable
                :decisions="decisions"
                :actions="actions"
                :email-templates="email_templates"
                :available-events="events"
                :segments="segments"
                :archive-settings="archive_settings"
              />
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
