import { Box, Button, Card, Flex, Icon, Spacer } from '@chakra-ui/react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IoShareSocialOutline } from 'react-icons/io5';
import MediaQuery from 'react-responsive';
import { MEDIA_QUERY_DESKTOP_STARTS, MEDIA_QUERY_MOBILE_ENDS } from '../constants/mediaquery';

export interface IProps {
  show: boolean
  onClick(): void
}

const CopyToClipboardButton: React.FC<IProps> = (props) => {

  const { show, onClick } = props

  const [showSuccess, setShowSuccess] = useState<boolean>(false)

  const { t } = useTranslation();

  const handleClick = () => {
    onClick()
    setShowSuccess(true)

    setTimeout(() => {
      setShowSuccess(false)
    }, 3000)
  }

  return (
    <>
      {show &&
        <Box p='4' mx={{ base: 0, md: 4 }}>
          <Flex justifyContent={'flex-end'} alignItems={'center'}>
            <Button bgColor={showSuccess ? 'green.400' : ''} onClick={handleClick}>
              {showSuccess ? t('search.copy_success') : t('search.copy_search_link')} &nbsp; <Icon as={IoShareSocialOutline} />
            </Button>
          </Flex>
        </Box>}
    </>
  );
};

export default CopyToClipboardButton;