---
import { SOCIAL_ICONS } from "@constants";

interface Props {
  icon: keyof typeof SOCIAL_ICONS;
  size: "xs" | "sm" | "lg";
}

const { icon, size } = Astro.props;
const IconComponent = SOCIAL_ICONS[icon].icon;
---

<a
  href={SOCIAL_ICONS[icon].link.url}
  title={SOCIAL_ICONS[icon].link.label}
  aria-label={SOCIAL_ICONS[icon].link.label}
  target="_blank"
  rel="noopener noreferrer"
  class={`text-white hover:text-primary ${size === "xs" ? "w-4 h-4" : size === "sm" ? "w-6 h-6" : "w-8 h-8"}`}
>
  <IconComponent />
</a>