import { ContentCopy } from '@mui/icons-material/'
import { Box, IconButton, Typography } from '@mui/material'
import { toast } from 'react-toastify'

type Props = {
  textToCopy: string
}

export const CopyToClipboard = ({ textToCopy }: Props) => {
  const handleCopyClick = () => {
    navigator.clipboard.writeText(textToCopy)
    toast.success('Copied to clipboard', {
      autoClose: 1000,
      hideProgressBar: true
    })
  }

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        width: '100%'
      }}
    >
      <Typography
        onClick={(e) => {
          e.stopPropagation()
          handleCopyClick()
        }}
        component="label"
        sx={{
          flex: '1',
          overflow: 'auto',
          whiteSpace: 'nowrap',
          cursor: 'pointer'
        }}
      >
        {textToCopy}
      </Typography>
      <IconButton
        onClick={(e) => {
          e.stopPropagation()
          handleCopyClick()
        }}
      >
        <ContentCopy />
      </IconButton>
    </Box>
  )
}