import { MoveRight } from "lucide-react";

import { cn } from "@/lib/utils";

const columns = [
  {
    title: "مدیریت دارایی",
    description:
      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
    link: true,
  },
  {
    title: "بودجه‌بندی",
    description:
      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
    link: true,
  },
  {
    title: "مدیریت مالی",
    description:
      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
    link: false,
  },
];

interface Feature35Props {
  className?: string;
}

const Feature35 = ({ className }: Feature35Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-10 lg:grid-cols-4 lg:gap-20">
          <h2 className="row-span-2 text-3xl font-semibold">
            عملیات سازمان را یکپارچه کنید
          </h2>
          {columns.map((column) => (
            <div key={column.title} className="flex flex-col gap-6">
              <div>
                <h3 className="mb-2 text-lg font-semibold lg:mb-8">
                  {column.title}
                </h3>
                <p className="text-muted-foreground">{column.description}</p>
              </div>
              {column.link && (
                <a href="#" className="inline-flex items-center hover:underline">
                  <span>بیشتر بدانید</span>
                  <MoveRight
                    strokeWidth={1}
                    className="ms-2 size-4 rtl:rotate-180"
                  />
                </a>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature35 };