import { CustomModal } from '@/components'
import React from 'react'
import { CopyToClipboard } from 'react-copy-to-clipboard';
import style from './index.module.scss';
import { Copy } from 'lucide-react';

interface ShareModalProps {
  show: boolean
  handleClose: () => void
  size?: string
  className: string
  isCloseBtn: boolean
  value: string
  handleCopySuccess: () => void
}




const ShareModal = ({ show, handleClose, size, className, isCloseBtn, value, handleCopySuccess }: ShareModalProps) => {
  return (
    <CustomModal
      show={show}
      isCloseBtn={true}
      className=""
      size={undefined}
      handleClose={handleClose}
    >
      <div className="py-5 px-2 px-sm-5">
        <h5 className="text-center display-6 fw-bold">Share</h5>

        <div className={`${style.copyLinkContainer}`}>
          <div className="d-flex align-items-center justify-content-start gap-2">
            <img src="/images/kalenzra/icons/copy-link.svg" alt="" />
            <p className="mb-0">{value?.substring(0, 30)}...</p>
          </div>
          <CopyToClipboard text={value} onCopy={handleCopySuccess}>
            <Copy />
          </CopyToClipboard>
        </div>
      </div>
    </CustomModal>
  )
}

export default ShareModal