import {
  FaDiscord,
  FaGithub,
  FaLinkedin,
  FaSlack,
  FaXTwitter,
} from "react-icons/fa6";
import { SiBluesky } from "react-icons/si";

import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const iconWrapper =
  "mb-4 flex items-center justify-center h-16 w-16 rounded-full border-2 border-dotted border-muted-foreground/40 transition-colors duration-200";

interface Community6Props {
  className?: string;
}

const Community6 = ({ className }: Community6Props) => {
  const communityCards = [
    {
      icon: <FaXTwitter className="h-8 w-8 text-foreground/80" />,
      title: "X",
      description: "آخرین مقالات، آموزش‌ها و به‌روزرسانی‌های محصول را دنبال کنید.",
      link: "#",
    },
    {
      icon: <FaGithub className="h-8 w-8 text-foreground/80" />,
      title: "گیت‌هاب",
      description: "در توسعه مشارکت کنید، Issue ثبت کنید و از پروژه حمایت کنید.",
      link: "#",
    },
    {
      icon: <FaDiscord className="h-8 w-8 text-foreground/80" />,
      title: "دیسکورد",
      description: "با اعضای جامعه گفتگو کنید، تجربه‌های خود را به اشتراک بگذارید و پاسخ پرسش‌های خود را دریافت کنید.",
      link: "#",
    },
    {
      icon: <FaLinkedin className="h-8 w-8 text-foreground/80" />,
      title: "LinkedIn",
      description: "از طریق لینکدین با تیم ما در ارتباط باشید و شبکه حرفه‌ای خود را توسعه دهید.",
      link: "#",
    },
    {
      icon: <FaSlack className="h-8 w-8 text-foreground/80" />,
      title: "Slack",
      description: "برای همکاری سریع و ارتباط مستقیم به فضای پیام‌رسان تیمی ما بپیوندید.",
      link: "#",
    },
    {
      icon: <SiBluesky className="h-8 w-8 text-foreground/80" />,
      title: "Bluesky",
      description: "ما را در Bluesky دنبال کنید و در گفتگوهای جامعه مشارکت داشته باشید.",
      link: "#",
    },
  ];

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative overflow-hidden rounded-3xl bg-background py-32 text-foreground",
        className,
      )}
    >
      <div className="relative z-10 container flex flex-col items-center justify-center">
        <h2 className="mb-4 text-center text-xl font-bold tracking-tight md:text-2xll xl:text-2xll">
          به جامعه حرفه‌ای ما بپیوندید
                          </h2>
        <p className="mb-8 max-w-2xl text-center text-lg font-normal text-muted-foreground md:text-xl">
          با توسعه‌دهندگان، طراحان و متخصصان سراسر جهان ارتباط برقرار کنید، دانش کسب کنید و پروژه‌های ارزشمند بسازید.
                          </p>
        <div className="mb-10 grid w-full grid-cols-1 gap-6 md:grid-cols-3 xl:grid-cols-6">
          {communityCards.map((card) => (
            <Card
              key={card.title}
              className="group flex flex-1 flex-col items-center rounded-2xl bg-background p-8 transition-shadow duration-200 hover:shadow-lg"
            >
              <a
                href={card.link}
                target="_blank"
                rel="noopener noreferrer"
                className="flex flex-col items-center"
              >
                <span className={`${iconWrapper} group-hover:bg-muted`}>
                  {card.icon}
                </span>
                <h5 className="mb-1 text-lg font-semibold">{card.title}</h5>
                <p className="mb-2 text-center text-base text-muted-foreground">
                  {card.description}
                </p>
              </a>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Community6 };