Community 1 - Centered invite with logo and outline social buttons

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

import { Button } from "@/components/ui/button";
interface SocialLink {
  icon: React.ReactNode;
  url: string;
}

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

const Community1 = ({
  logo = "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/block-1.svg",
  heading = "Join our community",
  headingHighlight = "of designers & developers",
  socialLinks = [
    { icon: <FaXTwitter />, url: "https://x.com/shadcnblocks" },
    { icon: <FaGithub />, url: "https://github.com/shadcnblocks" },
    { icon: <FaDiscord />, url: "#" },
  ],
  className,
}: Community1Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-5">
          <img src={logo} alt="logo" 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" className="size-10">
                  {link.icon}
                </a>
              </Button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Community1 };