import React, { useState, useEffect } from 'react';

export default function CollapsibleIntro({ text }) {
  const STORAGE_KEY = 'devnet-intro-collapsed';
  const [collapsed, setCollapsed] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored === 'true') setCollapsed(true);
  }, []);

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, collapsed ? 'true' : 'false');
  }, [collapsed]);

  return (
    <div className="mb-8">
      <button
        type="button"
        className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline focus:outline-none mb-2"
        onClick={() => setCollapsed((c) => !c)}
        aria-expanded={!collapsed}
        aria-controls="devnet-intro-text"
      >
        <span>{collapsed ? 'Show more' : 'Show less'}</span>
        <svg
          className={`transition-transform duration-200 w-4 h-4 ${collapsed ? 'rotate-0' : 'rotate-180'}`}
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      <div
        id="devnet-intro-text"
        style={{ display: collapsed ? 'none' : 'block' }}
        className="text-lg text-gray-700 dark:text-gray-300"
      >
        {text}
      </div>
    </div>
  );
}