/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import type { JSX } from "react";

interface SocialProperties {
  readonly icon:       IconDefinition;
  readonly link:       string;
  readonly label:      string;
  readonly alt:        string;
  readonly color:      string;
  readonly background: string;
}

/**
 * Renders the view for a social media link.
 * @param properties - The link to render.
 * @returns A JSX element.
 */
export const Social = (properties: SocialProperties): JSX.Element => {
  const { icon, link, label, alt, background, color } = properties;

  return (
    <a
      aria-label={label}
      className="flex max-w-[300px] w-[95%] m-auto justify-between
        items-center border-solid border-2 rounded-3xl h-14 p-8 my-4"
      href={link}
      rel="noreferrer"
      style={{
        background:  background,
        borderColor: color,
        color:       color,
      }}
      target="_blank"
    >
      <FontAwesomeIcon aria-label={alt} icon={icon} size="3x" />
      <strong>{label}</strong>
    </a>
  );
};