import type { LucideIcon } from "lucide-react";
import { Eye, Keyboard, Volume2 } from "lucide-react";

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

interface Item {
  id: string;
  title: string;
  summary: string;
  icon: LucideIcon;
}

const FEATURES: Item[] = [
  {
    id: "keyboard-navigation",
    title: "تقویم تیمی",
    summary:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    icon: Keyboard,
  },
  {
    id: "screen-reader",
    title: "اشتراک فایل",
    summary:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    icon: Volume2,
  },
  {
    id: "color-contrast",
    title: "منشن و بحث",
    summary:
      "کار گروهی",
    icon: Eye,
  },
];

interface Feature217bProps {
  className?: string;
}

const Feature217b = ({ className }: Feature217bProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn(className)}>
      <div
        className="relative bg-cover bg-center bg-no-repeat py-20 after:absolute after:inset-0 after:z-10 after:block after:size-full after:bg-black/50 after:content-[''] md:py-24 xl:py-32"
        style={{
          backgroundImage:
            "url('/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png')",
        }}
      >
        <div className="relative z-20 container">
          <div className="flex flex-col gap-16">
            <div className="mx-auto max-w-4xl text-center">
              <h2 className="mb-6 text-xl tracking-tight text-balance text-white md:text-2xll">
                همکاری از راه دور را ساده کنید
              </h2>
              <p className="text-lg font-medium tracking-tight text-pretty text-white">
                اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
              </p>
            </div>

            <div className="grid items-stretch gap-8 lg:grid-cols-3">
              {FEATURES.map((item) => {
                const Icon = item.icon;

                return (
                  <div
                    key={item.id}
                    className="flex h-full flex-col items-center justify-center gap-4 rounded-xl border border-white/20 bg-white/10 p-6 backdrop-blur-sm"
                  >
                    <Icon className="size-8 stroke-white" />
                    <div className="max-w-sm text-center text-xl font-medium text-balance text-white">
                      {item.title}
                    </div>
                    <div className="max-w-sm text-center text-sm text-pretty text-white/70">
                      {item.summary}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature217b };