"use client";

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

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

const checkedItems = [
  "با هوش مصنوعی سریع‌تر تصمیم بگیرید",
  "اتوماسیون AI",
  "دستیار کسب‌وکار",
];

interface Feature125Props {
  className?: string;
}

const Feature125 = ({ className }: Feature125Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "container mx-auto flex flex-col items-start gap-20 py-32 md:flex-row md:items-center",
        className,
      )}
    >
      <div className="w-full text-start lg:w-[40%]">
        <h2 className="mb-8 text-3xl font-bold">
          کارهای تکراری را به AI بسپارید
        </h2>
        <p className="mb-10">
          پیشنهادهایی که واقعاً مفیدند
        </p>
        <ul className="mb-8 flex flex-col gap-2 text-muted-foreground">
          {checkedItems.map((item) => (
            <li className="flex items-center gap-2" key={item}>
              <Check className="size-5 shrink-0" />
              {item}
            </li>
          ))}
        </ul>
        <Button variant="outline">
          هوش مصنوعی
          <ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
        </Button>
      </div>
      <div className="relative flex h-[430px] w-full pt-4 pe-4 before:absolute before:inset-0 before:bg-primary/10 before:[mask-image:url('/block-media/shadcnblocks/block/patterns/cross-pattern.svg')] before:[mask-size:32px_32px] before:[mask-repeat:repeat]">
        <div className="absolute inset-0 z-1 bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-transparent to-background opacity-70" />
        <div className="relative mt-auto ms-auto w-[80%]">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="دستیار هوش مصنوعی"
            className="z-40 max-h-[350px] w-full rounded-md object-cover"
          />
        </div>
        <div className="absolute inset-0 z-50 bg-linear-to-l from-background via-transparent via-15%" />
        <div className="absolute inset-0 z-50 bg-linear-to-t from-background via-transparent via-15%" />
      </div>
    </section>
  );
};

export { Feature125 };