'use client';

import React, { useCallback } from 'react';
import { twMerge } from 'tailwind-merge';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { DiscordIcon, InstagramIcon, TiktokIcon, TwitterXIcon } from '@/icons';
import { eventLogger } from '@/utils/event-logger';
import { EventNames } from '@/utils/event-names';

interface SocialIcon {
  id: string;
  icon: React.ComponentType<{ className?: string }>;
  url: string;
}

const socialIcons: SocialIcon[] = [
  { id: 'x', icon: TwitterXIcon, url: 'https://twitter.com/sunomusic' },
  {
    id: 'instagram',
    icon: InstagramIcon,
    url: 'https://www.instagram.com/sunomusic/',
  },
  { id: 'tiktok', icon: TiktokIcon, url: 'https://www.tiktok.com/@sunomusic' },
  { id: 'discord', icon: DiscordIcon, url: 'https://discord.com/invite/suno' },
];

export type Props = React.HTMLAttributes<HTMLDivElement> & {
  buttonClassName?: string;
  buttonIconClassName?: string;
  buttonVariant?: ButtonVariant;
  buttonSize?: ButtonSize;
  buttonShape?: ButtonShape;
  buttonActive?: boolean;
  buttonAspectSquare?: boolean;
};

const SocialMediaBar: React.FC<Props> = (props) => {
  const {
    children,
    className,
    buttonClassName,
    buttonIconClassName,
    buttonVariant = ButtonVariant.Inherit,
    buttonSize = ButtonSize.Large,
    buttonShape = ButtonShape.Rounded,
    buttonActive = false,
    buttonAspectSquare,
    ...restProps
  } = props;

  const handleIconClick = useCallback((e: React.MouseEvent) => {
    const url = e.currentTarget.getAttribute('href');
    eventLogger.segmentTrack(EventNames.linkClickEvent, { socialUrl: url });
  }, []);

  return (
    <div
      className={twMerge(
        'flex flex-row items-center justify-center gap-2 p-2',
        className
      )}
      {...restProps}
    >
      {socialIcons.map((socialIcon) => (
        <Button
          key={socialIcon.id}
          className={twMerge('p-1', buttonClassName)}
          iconClassName={twMerge('m-0', buttonIconClassName)}
          variant={buttonVariant}
          size={buttonSize}
          shape={buttonShape}
          active={buttonActive}
          aspectSquare={buttonAspectSquare}
          href={socialIcon.url}
          target='_blank'
          onClick={handleIconClick}
          icon={socialIcon.icon}
        />
      ))}
      {children}
    </div>
  );
};

export default SocialMediaBar;