reui-blocks/blocks/settings-integrations5.tsx

"use client";

import { useState } from "react";

import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

interface IntegrationItem {
  image: string;
  title: string;
  description: string;
  isConnected?: boolean;
  className?: string;
}

interface IntegrationRowProps {
  integration: IntegrationItem;
  onToggle?: (title: string) => void;
}

const IntegrationRow = ({ integration, onToggle }: IntegrationRowProps) => {
  return (
    <div className="flex items-center justify-between gap-4 py-4">
      <div className="flex items-center gap-4">
        <div className="flex size-12 items-center justify-center rounded-lg border bg-muted/50">
          <img
            src={integration.image}
            alt={`آیکون ${integration.title}`}
            className={cn("size-7", integration.className)}
          />
        </div>
        <div className="space-y-0.5">
          <p className="font-medium">{integration.title}</p>
          <p className="text-sm text-muted-foreground">
            {integration.description}
          </p>
        </div>
      </div>
      <Switch
        checked={integration.isConnected}
        onCheckedChange={() => onToggle?.(integration.title)}
      />
    </div>
  );
};

interface SettingsIntegrations5Props {
  className?: string;
  heading?: string;
  subHeading?: string;
  integrations?: IntegrationItem[];
}

const SettingsIntegrations5 = ({
  className,
  heading = "اپلیکیشن‌های متصل",
  subHeading = "دسترسی ابزارهای متصل به فضای کاری CRM را مدیریت کنید.",
  integrations: initialIntegrations = [
    {
      image:
        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
      title: "Slack",
      description: "هشدار فروش و پشتیبانی را در Slack دریافت کنید",
      isConnected: true,
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/google-icon.svg",
      title: "Google Drive",
      description: "پیشنهاد و قرارداد را خودکار همگام کنید",
      isConnected: true,
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
      title: "Notion",
      description: "دادهٔ لید و حساب را به Notion صادر کنید",
      isConnected: false,
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/github-icon.svg",
      title: "GitHub",
      description: "ایشوها را با درخواست‌های مشتری لینک کنید",
      isConnected: true,
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      description: "دارایی‌های کمپین را از Figma وارد کنید",
      isConnected: false,
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/jira-icon.svg",
      title: "Jira",
      description: "تیکت پشتیبانی را با ایشوهای Jira همگام کنید",
      isConnected: true,
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/linear-icon.svg",
      title: "Linear",
      description: "کارهای محصول را از CRM در Linear بسازید",
      isConnected: false,
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/stripe-icon.svg",
      title: "Stripe",
      description: "تراکنش و وضعیت اشتراک را ببینید",
      isConnected: true,
    },
  ],
}: SettingsIntegrations5Props) => {
  const [integrations, setIntegrations] = useState(initialIntegrations);

  const handleToggle = (title: string) => {
    setIntegrations((prev) =>
      prev.map((i) =>
        i.title === title ? { ...i, isConnected: !i.isConnected } : i,
      ),
    );
  };

  return (
    <section className={cn("py-32", className)}>
      <div className="container max-w-2xl">
        <div className="rounded-lg border">
          <div className="border-b p-6">
            <h2 className="text-lg font-semibold">{heading}</h2>
            <p className="text-sm text-muted-foreground">{subHeading}</p>
          </div>
          <div className="divide-y px-6">
            {integrations.map((integration) => (
              <IntegrationRow
                key={integration.title}
                integration={integration}
                onToggle={handleToggle}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { SettingsIntegrations5 };