reui-blocks/blocks/integration11.tsx

"use client";

import React, { useState } from "react";

import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

interface Integration {
  id: number;
  icon: string;
  title: string;
  description: string;
  category: string;
  categoryDescription: string;
  connected: boolean;
}

const INTEGRATIONS: Integration[] = [
  {
    id: 1,
    icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
    title: "Google",
    description:
      "ابزارهایی برای جذب سرنخ، بازاریابی ایمیلی و پشتیبانی مشتری ارائه می‌دهد.",
    category: "ابزارهای فروش و بازاریابی",
    categoryDescription:
      "کارایی و اثربخشی فعالیت‌های فروش و بازاریابی شما را افزایش می‌دهد",
    connected: true,
  },
  {
    id: 2,
    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
    title: "GitHub",
    description: "مدیریت جامع فروش و روابط مشتری را فراهم می‌کند.",
    category: "ابزارهای فروش و بازاریابی",
    categoryDescription:
      "کارایی و اثربخشی فعالیت‌های فروش و بازاریابی شما را افزایش می‌دهد",
    connected: false,
  },
  {
    id: 3,
    icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
    title: "Spotify",
    description:
      "بر مدیریت خط لوله فروش با ابزار بصری تمرکز دارد.",
    category: "ابزارهای فروش و بازاریابی",
    categoryDescription:
      "کارایی و اثربخشی فعالیت‌های فروش و بازاریابی شما را افزایش می‌دهد",
    connected: false,
  },
  {
    id: 4,
    icon: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
    title: "Slack",
    description:
      "همکاری لحظه‌ای و به‌روزرسانی فعالیت‌های سامانه ارتباط با مشتری و فروش را ممکن می‌سازد.",
    category: "ارتباطات و همکاری",
    categoryDescription:
      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
    connected: true,
  },
  {
    id: 5,
    icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
    title: "Google",
    description: "ارتباطات و زمان‌بندی در سامانه ارتباط با مشتری و فروش را تقویت می‌کند.",
    category: "ارتباطات و همکاری",
    categoryDescription:
      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
    connected: true,
  },
  {
    id: 6,
    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
    title: "GitHub",
    description: "یکپارچه‌سازی سامانه ارتباط با مشتری و فروش در Microsoft Teams را پشتیبانی می‌کند.",
    category: "ارتباطات و همکاری",
    categoryDescription:
      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
    connected: false,
  },
  {
    id: 7,
    icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
    title: "Spotify",
    description: "نمای یکپارچه از تعاملات و برنامه‌های مشتری ارائه می‌دهد.",
    category: "ارتباطات و همکاری",
    categoryDescription:
      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
    connected: false,
  },
  {
    id: 8,
    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
    title: "GitHub",
    description:
      "فعالیت‌ها و عملکرد پشتیبانی مشتری را پیگیری و مدیریت می‌کند.",
    category: "ارتباطات و همکاری",
    categoryDescription:
      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
    connected: false,
  },
  {
    id: 9,
    icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
    title: "Figma",
    description: "پشتیبانی مشتری و تیکتینگ را در سامانه ارتباط با مشتری و فروش ساده‌تر می‌کند.",
    category: "ارتباطات و همکاری",
    categoryDescription:
      "کارایی و اثربخشی تعاملات و گردش‌کار تیم را بهبود می‌بخشد",
    connected: false,
  },
];

const TABS = [
  { label: "همه اپلیکیشن‌ها", value: "all" },
  { label: "متصل‌شده", value: "connected" },
  { label: "غیرمتصل", value: "disconnected" },
];

type CategoryGroup = {
  category: string;
  categoryDescription: string;
  integrations: Integration[];
};

function groupByCategory(data: Integration[]): CategoryGroup[] {
  const map = new Map<string, CategoryGroup>();
  data.forEach((item) => {
    if (!map.has(item.category)) {
      map.set(item.category, {
        category: item.category,
        categoryDescription: item.categoryDescription,
        integrations: [],
      });
    }
    map.get(item.category)!.integrations.push(item);
  });
  return Array.from(map.values());
}

interface Integration11Props {
  className?: string;
}

const Integration11 = ({ className }: Integration11Props) => {
  const [tab, setTab] = useState<string>("all");
  const [toggles, setToggles] = useState<Record<number, boolean>>(() => {
    const state: Record<number, boolean> = {};
    INTEGRATIONS.forEach((i) => {
      state[i.id] = i.connected;
    });
    return state;
  });

  let filtered: Integration[] = INTEGRATIONS;
  if (tab === "connected") filtered = INTEGRATIONS.filter((i) => toggles[i.id]);
  if (tab === "disconnected")
    filtered = INTEGRATIONS.filter((i) => !toggles[i.id]);
  const grouped = groupByCategory(filtered);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h1 className="mb-6 text-start text-xl font-bold">یکپارچه‌سازی‌ها</h1>
        <Tabs value={tab} onValueChange={setTab} dir="rtl">
          <TabsList className="mb-8">
            {TABS.map((t) => (
              <TabsTrigger
                key={t.value}
                value={t.value}
                className="px-4 py-2 text-sm font-medium"
              >
                {t.label}
              </TabsTrigger>
            ))}
          </TabsList>
          {TABS.map((t) => (
            <TabsContent key={t.value} value={t.value}>
              {grouped.map((group) => (
                <div key={group.category} className="mb-10 text-start">
                  <h2 className="mb-1 text-lg font-semibold">
                    {group.category}
                  </h2>
                  <p className="mb-4 text-sm text-muted-foreground">
                    {group.categoryDescription}
                  </p>
                  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    {group.integrations.map((integration) => (
                      <div
                        key={integration.id}
                        className="flex min-h-[170px] flex-col justify-between rounded-xl border bg-background p-6 text-start shadow-sm transition hover:shadow-md"
                      >
                        <div className="mb-4 flex items-center gap-4">
                          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-md bg-muted p-2">
                            <img
                              src={integration.icon}
                              alt={integration.title}
                              width={32}
                              height={32}
                              className="h-8 w-8 object-contain"
                            />
                          </div>
                          <div>
                            <div className="text-base leading-tight font-medium">
                              {integration.title}
                            </div>
                            <div className="text-xs leading-snug text-muted-foreground">
                              {integration.description}
                            </div>
                          </div>
                        </div>
                        <div className="mt-auto flex items-center justify-between gap-2">
                          <Button size="sm" variant="outline">
                            جزئیات
                          </Button>
                          <Switch
                            checked={toggles[integration.id]}
                            onCheckedChange={(checked: boolean) =>
                              setToggles((prev) => ({
                                ...prev,
                                [integration.id]: checked,
                              }))
                            }
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </section>
  );
};

export { Integration11 };