import { memo, useCallback } from 'react';
import css from 'styled-jsx/css';

import type { WithSpacingProps } from '~/src/lib/hocs/withSpacing';

import { SONGWHIP_EMAIL } from '~/lib/constants';
import openEmailApp from '~/src/lib/utils/openEmailApp';
import Box from '../Box';
import Clickable from '../Clickable';
import EmailIcon from '../Icon/EmailIcon';

interface SocialButtonsProps extends WithSpacingProps {
  reference?: string;
  iconSize?: number | string;
  iconMargin?: string;
}

const style = css.resolve`
  :hover :global(a),
  :hover :global(button) {
    opacity: 0.6;
  }

  :hover :global(a:hover),
  :hover :global(button:hover) {
    opacity: 1;
    transform: scale(1.035);
  }
`;

const SocialButtons = memo<SocialButtonsProps>(
  ({
    reference,
    iconSize = '3.2rem',
    iconMargin = '0 0 0 .8rem',
    ...props
  }) => {
    return (
      <Box flexRow flexWrap {...props} className={style.className}>
        <Clickable
          isInline
          onClick={useCallback(() => {
            openEmailApp({
              to: SONGWHIP_EMAIL,
              subject: reference,
            });
          }, [])}
          title="Songwhip Email"
        >
          <EmailIcon size={iconSize} margin={iconMargin} />
        </Clickable>
        {style.styles}
      </Box>
    );
  }
);

export default SocialButtons;