import { useState } from 'react';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import CheckIcon from '@mui/icons-material/Check';
import IconButton from '@mui/material/IconButton';
import { Tooltip } from '@mui/material';
import { SxProps, Theme } from '@mui/material';

interface CopyBubbleProps {
  content: string | undefined,
  sx?: SxProps<Theme>;
}

const CopyBubble = ({
  content,
  sx,
} : CopyBubbleProps) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    if (content === undefined) {
      return;
    }

    navigator.clipboard.writeText(content.trim()).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
    });
  };

return (
  <Tooltip title="Copy to clipboard" placement="top" arrow>
    <IconButton
      onClick={handleCopy}
      sx={{
        width: 24,
        height: 24,
        opacity: 0.75,
        bgcolor: 'background.paper',
        '&:hover': { bgcolor: 'action.hover', opacity: 1 },
        ...sx,
      }}
      size="small"
      color={copied ? "success" : "default"}
    >
      {copied ? <CheckIcon sx={{ width: 16, height: 16 }} /> : <ContentCopyIcon sx={{ width: 16, height: 16 }} />}
    </IconButton>
  </Tooltip>
  );
}

export {
  CopyBubble
}