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

import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Feature24Props {
  className?: string;
}

const Feature24 = ({ className }: Feature24Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("mb-32 border-b pt-32", className)}
    >
      <div className="container max-w-7xl">
        <div className="flex items-center justify-between text-sm">
          <div className="flex items-center gap-1 text-muted-foreground">
            <LayoutTemplate className="size-5 text-primary" />
            <p>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</p>
          </div>
          <a href="#" className="hover:text-primary hover:underline">
            بیشتر بدانید
            <ChevronRight className="ms-2 inline-block size-4 rtl:rotate-180" />
          </a>
        </div>
        <Separator className="mt-3 mb-8" />
        <div className="flex flex-col justify-between gap-6 md:flex-row">
          <h2 className="text-3xl font-medium md:w-1/2">
            تصمیم استراتژیک را داده‌محور کنید
          </h2>
          <p className="leading-7 text-muted-foreground md:w-1/2">
            هر تیم داشبورد خودش را داشته باشد
          </p>
        </div>
        <img
          src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
          alt="گزارش‌ساز"
          className="mt-10 aspect-video w-full rounded-t-lg object-cover lg:mt-16"
        />
      </div>
    </section>
  );
};

export { Feature24 };