import { TwitterShareButton, FacebookShareButton, TelegramShareButton, LinkedinShareButton } from 'react-share';
import React, { ComponentPropsWithoutRef, FC } from 'react';
import { cva } from 'class-variance-authority';
import { Icon } from '../../molecules/Icon';
import { cssMerge } from '../../utils/cssMerge';
import { useCopyToClipboard } from '../../utils/hooks/useCopyToClipboard';

export interface SocialShareButtonProps extends ComponentPropsWithoutRef<'div'> {
  slug: string;
  title?: string;
  color?: 'purple';
}

const button = cva(['tw-cursor-pointer'], {
  variants: {
    color: {
      purple: ['tw-text-purple-500', 'hover:tw-text-common-white'],
    },
  },
  defaultVariants: {
    color: 'purple',
  },
});

export const SocialShareButtons: FC<SocialShareButtonProps> = ({
  slug,
  title,
  className,
  color = 'purple',
  ...props
}) => {
  const { copy } = useCopyToClipboard();
  const url = `https://www.solana.com/${slug}`;

  return (
    <div className={cssMerge('tw-flex', 'tw-gap-6', className)} {...props}>
      <TwitterShareButton url={url} title={title}>
        <Icon id="twitter-share" className={button({ color })} />
      </TwitterShareButton>
      <FacebookShareButton url={url}>
        <Icon id="facebook-share" className={button({ color })} />
      </FacebookShareButton>
      <LinkedinShareButton url={url} title={title}>
        <Icon id="linkedin-share" className={button({ color })} />
      </LinkedinShareButton>
      <TelegramShareButton url={url} title={title}>
        <Icon id="telegram-share" className={button({ color })} />
      </TelegramShareButton>
      {/* TODO: Add Tooltip notification on copy after tooltip development (SOL-60)  */}
      <Icon id="link" onClick={() => copy(url)} className={button({ color })} role="button" aria-label="Copy URL" />
    </div>
  );
};
