import Icon from '@/components/base/Icon';
import { cn } from '@heroui/react';
import type { IconProps } from '@/components/base/Icon';

interface socialLink {
  icon: string;
  url: string;
  label?: string;
}

export interface SocialLinksProps {
  socialPlatforms?: socialLink[];
  outline?: boolean;
  className?: string;
}

const SocialLinks: React.FC<SocialLinksProps> = ({
  socialPlatforms,
  outline,
  className,
  ...props
}) => {
  const iconClasses = cn('text-xl mx-auto', className);
  return (
    <div {...props} className="flex gap-4 flex-wrap">
      {socialPlatforms?.map(({ icon, url, label }) => (
        <a
          key={label}
          href={url}
          title={label}
          target="_blank"
          className={cn(
            outline &&
              ' flex items-center justify-center border-1 border-white rounded-full w-10 h-10 flex-wrap'
          )}>
          <Icon
            name={label?.toLocaleLowerCase() as IconProps['name']}
            className={cn(iconClasses)}
          />
        </a>
      ))}
    </div>
  );
};
export default SocialLinks;
