import React from 'react';
import { FaCopy, FaShareAlt } from 'react-icons/fa';
import styles from '../styles/Surah.module.css';
import convertToArabicNumerals  from '../utils/convertToArabicNumerals';

const VerseList = ({ verses, surah, language, onLoadMore, loading }) => {
  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text);
    alert(language === 'ar' ? 'تم نسخ الآية!' : 'Verse copied!');
  };

  const shareVerse = (text) => {
    if (navigator.share) {
      navigator.share({
        title: language === 'ar' ? 'مشاركة آية' : 'Share Verse',
        text: text,
      }).catch((error) => console.log('Sharing error:', error));
    } else {
      alert(language === 'ar' 
        ? 'ميزة المشاركة غير مدعومة على هذا المتصفح' 
        : 'Sharing not supported on this browser');
    }
  };

  return (
    <>
      {verses.map((verse, index) => {
        const verseNumber = index + 1;
        console.log(`Verse number: ${verseNumber}`);
        const formattedText = `"${verse.text.ar}"\n\n🌐 ${language === 'ar' ? 'ترجمة' : 'Translation'}:\n\n"${verse.text.en}"\n\n🔖 — ${surah.name.ar}:${verseNumber}`;

        return (
          <div key={`${surah.number}-${verseNumber}`} className={styles.verseContainer}>
            <div className={styles.verseBox}>
              <p className={styles.verseText} dir="rtl" lang="ar">
                {verse.text.ar}
              </p>
              <p className={styles.verseTextEn} dir="ltr" lang="en">
                {verse.text.en}
              </p>
            </div>
            <span className={styles.VerseNumber}>
              {convertToArabicNumerals(verseNumber)}
            </span>
            <div className={styles.actions}>
              <button 
                onClick={() => copyToClipboard(formattedText)}
                aria-label={language === 'ar' ? 'نسخ الآية' : 'Copy verse'}
              >
                <FaCopy className={styles.icon} />
              </button>
              <button 
                onClick={() => shareVerse(formattedText)}
                aria-label={language === 'ar' ? 'مشاركة الآية' : 'Share verse'}
              >
                <FaShareAlt className={styles.icon} />
              </button>
            </div>
          </div>
        );
      })}

      {onLoadMore && verses.length < surah.verses_count && (
        <div className={styles.loadMoreContainer}>
          <button 
            onClick={onLoadMore} 
            disabled={loading}
            className={styles.loadMoreButton}
          >
            {loading 
              ? (language === 'ar' ? 'جاري التحميل...' : 'Loading...') 
              : (language === 'ar' ? 'تحميل المزيد من الآيات' : 'Load more verses')}
          </button>
        </div>
      )}
    </>
  );
};

export default VerseList;
