import React, { useState } from 'react';

// Helper function to convert URLs within text into clickable links
const linkify = (text) => {
  const urlRegex = /(https?:\/\/[^\s]+)/g;
  return text.split(urlRegex).map((part, index) => 
    urlRegex.test(part) ? <a key={index} href={part} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">{part}</a> : part
  );
};

// Single FAQ Item Component with possible nested items
const FAQItem = ({ faq }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = () => setIsOpen(!isOpen);

  return (
    <div>
      <h2>
        <button
          onClick={toggleOpen}
          className="flex items-center justify-between w-full p-5 font-medium text-left border border-b-0 border-blue-200 rounded-t-xl focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 gap-3"
          aria-expanded={isOpen}
        >
          <span>{faq.question}</span>
          <svg
            className={`w-6 h-6 transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </button>
      </h2>
      <div id={`faq-answer-${faq.id}`} className={`p-5 border border-blue-200 dark:border-blue-700 ${!isOpen ? 'hidden' : ''}`}>
        <div className="mb-2">{linkify(faq.answer)}</div>
        {/* Render Nested FAQs if any */}
        {faq.subFaqs && faq.subFaqs.length > 0 && faq.subFaqs.map((subFaq, index) => (
          <FAQItem key={index} faq={subFaq} />
        ))}
      </div>
    </div>
  );
};

// Main NestedFAQ Component
const NestedFAQ = ({ data }) => {
  return (
    <div id="accordion-nested-parent max-w-[400px]" className="space-y-4">
      {data.map((faq, index) => (
        <FAQItem key={index} faq={faq} />
      ))}
    </div>
  );
};

export default NestedFAQ;