"use client";

import { useState } from "react";
import { PageHeader, Tabs } from "@/components/ds";
import { BeautyResourceWorkspace } from "@/modules/beauty/components/crud/BeautyResourceWorkspace";
import {
  loyaltyIntegrationResource,
  communicationIntegrationResource,
  integrationDispatchResource,
} from "@/modules/beauty/configs/owner-resources";

export default function IntegrationsPage() {
  const [tab, setTab] = useState("loyalty");

  return (
    <div className="space-y-6">
      <PageHeader title="یکپارچه‌سازی‌ها" description="اتصال به وفاداری، ارتباطات و dispatch رویدادها." />
      <Tabs
        items={[
          { id: "loyalty", label: "وفاداری" },
          { id: "communication", label: "ارتباطات" },
          { id: "dispatch", label: "Dispatch" },
        ]}
        value={tab}
        onChange={setTab}
      />
      {tab === "loyalty" ? <BeautyResourceWorkspace config={loyaltyIntegrationResource} /> : null}
      {tab === "communication" ? (
        <BeautyResourceWorkspace config={communicationIntegrationResource} />
      ) : null}
      {tab === "dispatch" ? <BeautyResourceWorkspace config={integrationDispatchResource} /> : null}
    </div>
  );
}
