import React from 'react';
import socials from '../configs/socials';

interface SocialIconProps {
  size?: string;
  social: keyof typeof socials;
}

const SocialIcon = ({ size = 'text-3xl', social }: SocialIconProps) => (
  <a
    href={socials[social].href}
    target="_blank"
    rel="noopener noreferrer"
    className={`transition-all ${size} hover:opacity-70`}
    aria-label={socials[social].title}
  >
    <i
      className={socials[social].icon}
      style={{ color: socials[social].color }}
    />
    {/* <span className="sr-only">{socials[social].title}</span> */}
  </a>
);

export default SocialIcon;