import React from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const DATA = [
  {
    id: 1,
    icon: "/block-media/shadcnblocks/block/logos/google-icon.svg",
    title: "حساب ابری Sheets",
    description:
      "داده‌های خود را با حساب ابری Sheets همگام کنید و اتوماسیون را بدون دردسر انجام دهید.",
  },
  {
    id: 2,
    icon: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
    title: "Slack",
    description:
      "اعلان‌ها و به‌روزرسانی‌ها را مستقیم در کانال‌های پیام‌رسان تیمی دریافت کنید.",
  },
  {
    id: 3,
    icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
    title: "Sketch",
    description:
      "طراحی‌های طراحی برداری را وارد کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
  },
  {
    id: 4,
    icon: "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
    title: "Gatsby",
    description: "با یکپارچه‌سازی Gatsby وب‌سایت‌هایی سریع و بهینه بسازید.",
  },
  {
    id: 5,
    icon: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
    title: "Shopify",
    description:
      "داده‌های فروشگاه Shopify را همگام کنید و مدیریت سفارش‌ها را ساده‌تر کنید.",
  },
  {
    id: 6,
    icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
    title: "GitHub",
    description:
      "گردش‌کارها را خودکار کنید و تغییرات را با یکپارچه‌سازی مخزن کد پیگیری کنید.",
  },
  {
    id: 7,
    icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
    title: "Figma",
    description:
      "طراحی‌های طراحی رابط را همگام کنید و فرایند طراحی خود را یکپارچه‌تر کنید.",
  },
  {
    id: 8,
    icon: "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
    title: "Dropbox",
    description:
      "فایل‌های Dropbox را همگام کنید و مدیریت فایل‌ها را ساده‌تر کنید.",
  },
];

interface Integration10Props {
  className?: string;
}

const Integration10 = ({ className }: Integration10Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-12", className)}>
      <div className="container mx-auto max-w-2xl">
        <h2 className="mb-2 text-start text-xl font-semibold">
          یکپارچه‌سازی‌ها
        </h2>
        <p className="mb-6 text-start text-muted-foreground">
          فضای کاری خود را با یکپارچه‌سازی‌ها متصل کنید.
        </p>
        <div className="space-y-4">
          {DATA.map(({ id, icon, title, description }) => (
            <div
              key={id}
              className="flex flex-col items-start justify-between gap-4 rounded-xl border bg-background px-6 py-4 text-start shadow-sm md:flex-row md:items-center"
            >
              <div className="flex w-full flex-col items-start gap-4 md:w-auto md:flex-row md:items-center">
                <img
                  src={icon}
                  alt={title}
                  className="h-10 w-10 shrink-0 object-contain"
                />
                <div>
                  <h3 className="text-lg font-medium">{title}</h3>
                  <p className="text-sm text-muted-foreground">{description}</p>
                </div>
              </div>
              <div className="shrink-0 md:ms-4">
                <Button variant="outline">اتصال</Button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Integration10 };