import React from 'react';

interface Prayer {
  id: string;
  text: string;
  type: 'prayer' | 'praise';
}

interface SharePrayerProps {
  prayer: Prayer;
}

export default function SharePrayer({ prayer }: SharePrayerProps) {
  const shareText = `🙏 ${prayer.type === 'prayer' ? 'Prayer' : 'Praise'}: ${prayer.text.substring(0, 100)}${prayer.text.length > 100 ? '...' : ''}`;
  const shareUrl = window.location.href;

  const shareToTwitter = () => {
    const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`;
    window.open(url, '_blank', 'width=600,height=400');
  };

  const shareToFacebook = () => {
    const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}&quote=${encodeURIComponent(shareText)}`;
    window.open(url, '_blank', 'width=600,height=400');
  };

  const shareToWhatsApp = () => {
    const url = `https://wa.me/?text=${encodeURIComponent(shareText + ' ' + shareUrl)}`;
    window.open(url, '_blank', 'width=600,height=400');
  };

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(`${shareText} ${shareUrl}`);
      alert('Prayer copied to clipboard!');
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  };

  return (
    <div className="flex items-center space-x-2 mt-2">
      <span className="text-xs text-gray-400">Share:</span>
      <button
        onClick={shareToTwitter}
        className="text-blue-400 hover:text-blue-300 text-sm px-2 py-1 rounded hover:bg-blue-400/10 transition-colors"
        title="Share on Twitter"
      >
        🐦
      </button>
      <button
        onClick={shareToFacebook}
        className="text-blue-600 hover:text-blue-500 text-sm px-2 py-1 rounded hover:bg-blue-600/10 transition-colors"
        title="Share on Facebook"
      >
        📘
      </button>
      <button
        onClick={shareToWhatsApp}
        className="text-green-400 hover:text-green-300 text-sm px-2 py-1 rounded hover:bg-green-400/10 transition-colors"
        title="Share on WhatsApp"
      >
        💬
      </button>
      <button
        onClick={copyToClipboard}
        className="text-gray-400 hover:text-gray-300 text-sm px-2 py-1 rounded hover:bg-gray-400/10 transition-colors"
        title="Copy to clipboard"
      >
        📋
      </button>
    </div>
  );
}