import type { IconType } from "react-icons";
import {
  FaDiscord,
  FaLinkedin,
  FaRedditAlien,
  FaTelegramPlane,
  FaTwitter,
} from "react-icons/fa";

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

const integrations = [
  {
    name: "Figma",
    logo: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
  },
  {
    name: "TailwindCSS",
    logo: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
  },
  {
    name: "shadcn/ui",
    logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
    description:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
  },
];

const socialPlatforms: { name: string; icon: IconType }[] = [
  { name: "Discord", icon: FaDiscord },
  { name: "Reddit", icon: FaRedditAlien },
  { name: "Twitter", icon: FaTwitter },
  { name: "Telegram", icon: FaTelegramPlane },
  { name: "LinkedIn", icon: FaLinkedin },
];

interface Feature92Props {
  className?: string;
}

const Feature92 = ({ className }: Feature92Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("border-y bg-muted/50 py-32", className)}
    >
      <div className="container">
        <div>
          <h2 className="text-3xl font-bold lg:text-xl">تصمیم استراتژیک را داده‌محور کنید</h2>
          <p className="text-3xl text-muted-foreground lg:text-xl">
            هر تیم داشبورد خودش را داشته باشد
          </p>
        </div>
        <div className="mt-10 mb-8 grid gap-7 lg:grid-cols-3">
          {integrations.map((integration) => (
            <div key={integration.name} className="flex flex-col gap-2">
              <div className="flex items-center gap-2 text-xl font-semibold">
                <img
                  src={integration.logo}
                  alt={`لوگوی ${integration.name}`}
                  className="h-5 w-auto"
                />
                {integration.name}
              </div>
              <p>{integration.description}</p>
            </div>
          ))}
        </div>
        <ul className="grid grid-cols-2 items-center gap-7 text-muted-foreground md:grid-cols-3 lg:grid-cols-6">
          {socialPlatforms.map((platform) => (
            <li
              key={platform.name}
              className="flex items-center gap-2 font-medium"
            >
              <platform.icon className="size-6 shrink-0" />
              {platform.name}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Feature92 };