"use client";

import { ArrowLeftRight, Check } from "lucide-react";

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

const permissions = [
  "مشاهده تحلیل‌ها و معیارهای عملکرد",
  "ایجاد و مدیریت نقاط عطف پروژه",
  "تخصیص و به‌روزرسانی مسئولیت‌های تیم",
  "دریافت و پاسخ به بازخورد مشتری",
  "مدیریت ترجیحات اعلان و هشدارها",
];

interface Integration12Props {
  className?: string;
}

const Integration12 = ({ className }: Integration12Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "flex min-h-screen items-center justify-center bg-muted py-32",
        className,
      )}
    >
      <div className="container">
        <div className="mx-auto flex w-full max-w-md flex-col items-center gap-6 p-0">
          <div className="flex w-full flex-col items-center gap-2 border-b pb-4">
            <div className="mt-2 mb-2 flex items-center justify-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg border bg-background p-3 shadow">
                <img
                  src="/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg"
                  alt="shadcn/ui"
                  className="h-full w-full object-contain"
                />
              </div>
              <ArrowLeftRight className="size-4 shrink-0" aria-hidden />
              <div className="flex h-12 w-12 items-center justify-center rounded-lg border bg-background p-3 shadow">
                <img
                  src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
                  alt="ShadcnBlocks"
                  className="h-full w-full object-contain"
                />
              </div>
            </div>
            <h1 className="text-center text-xl font-semibold">
              اتصال ری یو آی به ری یو آی
            </h1>
            <p className="mt-1 text-center text-base text-muted-foreground">
              تیم خود را با پیگیری یکپارچه پروژه و همکاری لحظه‌ای بین پلتفرم‌ها
              توانمند کنید.
            </p>
          </div>
          <div className="w-full py-6">
            <ul className="space-y-3 text-start">
              {permissions.map((perm, i) => (
                <li
                  key={i}
                  className="flex items-center gap-3 text-sm text-foreground"
                >
                  <Check className="size-4 shrink-0 text-primary" />
                  {perm}
                </li>
              ))}
            </ul>
          </div>
          <div className="flex w-full items-center justify-start gap-2 pb-2">
            <Button type="button">اتصال هم‌اکنون</Button>
            <Button variant="outline" type="button">
              لغو
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Integration12 };