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

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface SocialLink {
  icon: React.ReactNode;
  url: string;
  label: string;
}

interface Community1Props {
  logo?: string;
  heading?: string;
  headingHighlight?: string;
  socialLinks?: SocialLink[];
  className?: string;
}

const Community1 = ({
  logo = "/block-media/shadcnblocks/block/block-1.svg",
  heading = "در جامعه ما عضو شوید",
  headingHighlight = "شبکه‌ای از متخصصان، طراحان و توسعه‌دهندگان پیشرو",
  socialLinks = [
    {
      icon: <FaXTwitter />,
      url: "https://x.com/ShadcnBlocks",
      label: "در X همراه ما باشید",
    },
    {
      icon: <FaGithub />,
      url: "https://github.com/ShadcnBlocks",
      label: "پروژه‌های ما را در گیت‌هاب دنبال کنید",
    },
    {
      icon: <FaDiscord />,
      url: "#",
      label: "به جمع ما در دیسکورد بپیوندید",
    },
  ],
  className,
}: Community1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-5">
          <img src={logo} alt="لوگو" className="size-10" />
          <h2 className="text-center text-3xl font-semibold">
            {heading}
            <br />
            <span className="text-muted-foreground/80">{headingHighlight}</span>
          </h2>
          <div className="flex items-center gap-4">
            {socialLinks.map((link, index) => (
              <Button key={index} size="lg" variant="outline" asChild>
                <a
                  href={link.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={link.label}
                  className="size-10"
                >
                  {link.icon}
                </a>
              </Button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Community1 };