import React from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface DataItem {
  id: number;
  icon: string;
  title: string;
  description: string;
}

const DATA: DataItem[] = [
  {
    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:
      "گردش‌کارها را خودکار کنید و تغییرات را با یکپارچه‌سازی مخزن کد پیگیری کنید.",
  },
];

const FeatureCard: React.FC<DataItem> = ({ title, description, icon }) => {
  return (
    <Card className="w-full rounded-xl bg-background py-2">
      <CardHeader className="flex flex-row items-center gap-4">
        <div className="relative h-12 w-12 shrink-0">
          <img
            src={icon}
            alt={title}
            width={48}
            height={48}
            className="h-full w-full object-contain"
          />
        </div>
        <div className="text-start">
          <CardTitle className="text-lg">{title}</CardTitle>
          <CardDescription className="text-muted-foreground">
            {description}
          </CardDescription>
        </div>
      </CardHeader>
    </Card>
  );
};

interface Integration1Props {
  className?: string;
}

const Integration1 = ({ className }: Integration1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
      {/* Background pattern container */}
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <div
          className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_top,black_30%,transparent_70%)] bg-[length:60px_60px] opacity-[0.03] [-webkit-mask-image:radial-gradient(ellipse_at_top,black_30%,transparent_70%)]"
          style={{
            backgroundImage:
              "url('/block-media/shadcnblocks/block/patterns/pie-factory.svg')",
          }}
        />
      </div>

      <div className="relative container flex max-w-5xl flex-col items-center text-center">
        <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll">
          ابزارهای محبوبتان را متصل کنید
        </h1>
        <h2 className="mb-8 max-w-3xl text-muted-foreground lg:text-xl">
          با اتصال ابزارهایی که هر روز استفاده می‌کنید، گردش‌کار خود را تقویت
          کنید. یکپارچه‌سازی‌های بی‌درز ما به شما کمک می‌کنند وظایف را خودکار
          کنید و همه‌چیز را همگام نگه دارید.
        </h2>
      </div>

      {/* Integration Cards */}
      <div className="mx-auto mt-4 grid max-w-4xl grid-cols-1 gap-6 px-4 sm:grid-cols-2 md:mt-8 lg:mt-12">
        {DATA.map((feature) => (
          <FeatureCard
            icon={feature.icon}
            title={feature.title}
            description={feature.description}
            id={feature.id}
            key={feature.id}
          />
        ))}
      </div>

      {/* Buttons */}
      <div className="mt-12 flex flex-row flex-wrap items-center justify-center gap-x-4 gap-y-2">
        <span className="text-muted-foreground">
          ابزاری دارید که می‌خواهید به آن متصل شوید؟
        </span>
        <Button asChild>
          <a href="https://ShadcnBlocks">درخواست یکپارچه‌سازی</a>
        </Button>
      </div>
    </section>
  );
};

export { Integration1 };