import { Dialog } from "@mui/material";

const ShareModal = ({ open, onClose, url }) => {
  const handleCopy = () => {
    navigator.clipboard.writeText(url);
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullWidth
      PaperProps={{
        className: "rounded-2xl p-4"
      }}
    >
      {/* Header */}
      <div className="flex items-center justify-between mb-3">
        <h2 className="text-lg font-semibold">Share Modal</h2>
        <button onClick={onClose} className="text-gray-500">✕</button>
      </div>

      {/* Title */}
      <p className="text-gray-600 text-sm mb-3">Share this link via</p>

      {/* Social Icons */}
      <div className="flex items-center gap-4 mb-5 justify-center">
        <a href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target="_blank">
          <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" className="w-10 h-10" />
        </a>

        <a href={`https://twitter.com/intent/tweet?url=${url}`} target="_blank">
          <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" className="w-10 h-10" />
        </a>

        <a href={`https://www.instagram.com`} target="_blank">
          <img src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png" className="w-10 h-10" />
        </a>

        <a href={`https://api.whatsapp.com/send?text=${url}`} target="_blank">
          <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" className="w-10 h-10" />
        </a>

        <a href={`https://t.me/share/url?url=${url}`} target="_blank">
          <img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" className="w-10 h-10" />
        </a>
      </div>

      {/* OR Copy link */}
      <p className="text-gray-600 text-sm mb-2">Or copy link</p>

      <div className="flex items-center gap-2 border rounded-xl p-2">
        <span className="text-gray-500">🔗</span>
        <input
          type="text"
          value={url}
          readOnly
          className="flex-1 outline-none text-sm"
        />
        <button
          onClick={handleCopy}
          className="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm"
        >
          Copy
        </button>
      </div>
    </Dialog>
  );
};

export default ShareModal;