"use client";

import { ArrowUpRight } from "lucide-react";

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

const integrations = [
  {
    title: "نقش و دسترسی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    image:
      "/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg",
    imageAlt: "تقویم تیم",
    buttonTitle: "بیشتر بدانید",
  },
  {
    title: "چک‌لیست تحویل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    image:
      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
    imageAlt: "فضای همکاری تیمی",
    buttonTitle: "شروع کنید",
  },
];

interface Feature150Props {
  className?: string;
}

const Feature150 = ({ className }: Feature150Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="grid min-h-[400px] grid-cols-1 gap-1 lg:grid-cols-2">
        {integrations.map((item, index) => (
          <a
            key={item.title}
            className={cn(
              "group relative flex cursor-pointer items-center justify-start bg-muted-foreground/10 p-10",
              index === 0 ? "lg:justify-center" : "lg:justify-start",
            )}
          >
            <img
              src={item.image}
              alt={item.imageAlt}
              className="absolute top-0 start-0 z-[-1] h-full w-full object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100"
            />

            <div className="flex max-w-sm flex-col items-start justify-center gap-10 text-start">
              <div className="flex flex-col gap-3">
                <h1 className="text-3xl text-black duration-500 group-hover:text-white">
                  {item.title}
                </h1>
                <p className="text-lg text-black duration-500 group-hover:text-white">
                  {item.description}
                </p>
              </div>
              <Button
                variant="outline"
                className="rounded-full transition-all duration-300 outline-none group-hover:bg-transparent group-hover:text-white"
              >
                {item.buttonTitle}
                <ArrowUpRight
                  strokeWidth="1"
                  className="ms-2 size-4 rtl:rotate-180"
                />
              </Button>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
};

export { Feature150 };