import { SocialIcons } from '@/components/icons/SocialIcons';
import Wrapper from '@/src/components/common/Wrapper';
import { SocialsProps } from '@/types/social';
import { cn } from '@/src/lib/utils';

export function Socials({ socials, styling, width, className, sectionId }: SocialsProps) {
  if (!socials?.length) return null;

  return (
    <Wrapper styling={styling} className={cn('flex gap-4', className)} id={sectionId}>
      {socials?.map((social, index) => (
        <a
          key={index}
          href={social.url}
          target='_blank'
          rel='noopener noreferrer'
          className='text-xl hover:opacity-75'
          style={{
            width: `${width}px`,
            height: `${width}px`,
          }}
        >
          {SocialIcons[social.platform]}
        </a>
      ))}
    </Wrapper>
  );
}
