import { Users } from "lucide-react";
import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";

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

interface Community3Props {
  className?: string;
}

const Community3 = ({ className }: Community3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-start pb-10 md:items-center md:pb-14 xl:pb-[60px]">
          <Badge>
            <Users className="h-4 w-4" />
            شبکه متخصصان
          </Badge>

          <h4 className="mt-4 text-[28px] leading-[36px] font-semibold tracking-tight text-foreground md:text-center md:text-3xl xl:text-[48px] xl:leading-[56px]">
            به جامعه ما بپیوندید
                                </h4>

          <p className="mt-2 text-lg text-muted-foreground md:text-center xl:mt-3 xl:text-xl">
            با طراحان، توسعه‌دهندگان و متخصصان فناوری{" "}
            <span className="font-medium text-foreground">همکاری</span> کنید،{" "}
            <span className="font-medium text-foreground">یاد بگیرید</span> و{" "}
            <span className="font-medium text-foreground">پیشرفت</span> کنید.
          </p>

          <div className="mt-6 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:mt-12 xl:gap-6">
            <Card className="rounded-2xl transition-all hover:shadow-md">
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="flex h-full flex-col items-center p-6 md:p-8 xl:p-10"
              >
                <FaXTwitter className="mb-4 h-8 w-8 md:h-12 md:w-12 xl:h-16 xl:w-16" />
                <div className="space-y-2 text-center">
                  <h5 className="text-sm font-medium md:text-lg">X</h5>
                  <p className="text-sm text-balance text-muted-foreground">
                    آخرین مقالات، آموزش‌ها، به‌روزرسانی‌ها و اخبار را دنبال کنید.
                                                        </p>
                </div>
              </a>
            </Card>

            <Card className="rounded-2xl transition-all hover:shadow-md">
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="flex h-full flex-col items-center p-6 md:p-8 xl:p-10"
              >
                <FaGithub className="mb-4 h-8 w-8 md:h-12 md:w-12 xl:h-16 xl:w-16" />
                <div className="space-y-2 text-center">
                  <h5 className="text-sm font-medium md:text-lg">گیت‌هاب</h5>
                  <p className="text-sm text-balance text-muted-foreground">
                    در توسعه پروژه مشارکت کنید، باگ‌ها را گزارش دهید و پیشنهادهای خود را ارائه کنید.
                                                        </p>
                </div>
              </a>
            </Card>

            <Card className="rounded-2xl transition-all hover:shadow-md">
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="flex h-full flex-col items-center p-6 md:p-8 xl:p-10"
              >
                <FaDiscord className="mb-4 h-8 w-8 md:h-12 md:w-12 xl:h-16 xl:w-16" />
                <div className="space-y-2 text-center">
                  <h5 className="text-sm font-medium md:text-lg">دیسکورد</h5>
                  <p className="text-sm text-balance text-muted-foreground">
                    با اعضای جامعه گفتگو کنید، تجربه‌های خود را به اشتراک بگذارید و پاسخ سؤالات خود را دریافت کنید.
                                                        </p>
                </div>
              </a>
            </Card>
          </div>

          <div className="mt-8 hidden max-w-[330px] text-center text-muted-foreground xl:block">
            در جامعه‌ای پویا حضور داشته باشید که بر پایه یادگیری، همکاری و نوآوری شکل گرفته است.
                                </div>
        </div>
      </div>
    </section>
  );
};

export { Community3 };