import Link from "next/link";

import { SOCIAL_MEDIA_DATA_PARTICIPANT } from "@/constants/ui-helpers";

type SocialMediaIconProps = {
  href: string;
  label: string;
  icon: React.ReactElement;
};

type SocialMediaIconsProps = {
  styleClasses?: string;
};

function SocialMediaIcon({ href, label, icon }: SocialMediaIconProps) {
  return (
    <Link href={href} rel="noopener noreferrer" target="_blank">
      <div
        aria-label={label}
        className="outline-blue-500 size-5 bg-gray-900 text-white rounded-full flex items-center justify-center hover:bg-white/10 hover:bg-opacity-90 hover:text-white outline-dashed outline-1 outline-offset-4"
      >
        {icon}
        <span className="sr-only">{label}</span>
      </div>
    </Link>
  );
}

function SocialMediaIcons({ styleClasses }: SocialMediaIconsProps) {
  return (
    <div
      className={`${styleClasses} flex space-x-3.5 items-center justify-center`}
    >
      {SOCIAL_MEDIA_DATA_PARTICIPANT.map((data) => {
        const Icon = data.icon;

        return (
          <SocialMediaIcon
            key={data.id}
            href={data.href}
            icon={<Icon />}
            label={data.label}
          />
        );
      })}
    </div>
  );
}

export default SocialMediaIcons;