import React from 'react';
import {NextLink, UtilityButton} from 'src/components';
import {CallButtonWrapper, CallButtonNumber, CallButtonText} from './styles';

interface CallButtonProps {
  callNumber: string;
  callNumberText: string;
}
 
export const CallButton: React.FC<CallButtonProps> = ({callNumberText, callNumber}): JSX.Element => {
  return (
    <CallButtonWrapper>
      <NextLink href={`tel:${callNumber.split('-').join('')}`} clickCategory="phone" clickAction="Call Now!" clickLabel={callNumberText}>
        <UtilityButton clickCategory="phone" clickAction="Call Now!" clickLabel={callNumberText+" "+callNumber}>
          <CallButtonText>{callNumberText}</CallButtonText>
          <CallButtonNumber>{callNumber}</CallButtonNumber>
        </UtilityButton>
      </NextLink>
    </CallButtonWrapper>
  );
};

export default CallButton;