const URLBox = ({ url, onDelete }) => {
      const handleCopy = async () => {
        try {
          await navigator.clipboard.writeText(url);
        } catch (err) {
          console.error('Copy failed', err);
        }
      };

      return (
        <Box
          sx={{
            width: '100%',
            border: '1px solid #ccc',
            borderRadius: 0,
            p: 1,
            display: 'flex',
            alignItems: 'center',
            wordBreak: 'break-all', // allows long URLs to wrap within the container
          }}
        >
          <Typography variant="body2" sx={{ flexGrow: 1 }}>
            {url}
          </Typography>
          <IconButton size="small" onClick={handleCopy}>
            <ContentCopyIcon fontSize="small" />
          </IconButton>
          <IconButton size="small" onClick={() => onDelete(url)}>
            <DeleteIcon fontSize="small" />
          </IconButton>
        </Box>
      );
    };