Szorongás csökkentés

import React, { useState } from 'react';
import { ChevronDown, ChevronRight, ExternalLink } from 'lucide-react';

const AnxietyTechniques = () => {
  const [openSection, setOpenSection] = useState(null);

  const techniques = {
    'Légzés': [
      {
        name: 'Mély hasi légzés',
        desc: 'Lassú, mély lélegzetek a hasba',
        link: 'https://www.healthline.com/health/diaphragmatic-breathing'
      },
      {
        name: '4-7-8 technika',
        desc: 'Belégzés 4mp, bent tartás 7mp, kilégzés 8mp',
        link: 'https://www.medicalnewstoday.com/articles/324417'
      }
    ],
    'Testmozgás': [
      {
        name: 'Jóga',
        desc: 'Nyugtató, stresszoldó hatású gyakorlatok',
        link: 'https://www.youtube.com/watch?v=v7AYKMP6rOE'
      },
      {
        name: 'Séta természetben',
        desc: 'Mindfulness sétával kombinálva',
        link: 'https://www.mindful.org/a-mindful-walking-practice-for-better-health/'
      }
    ]
  };

  const toggleSection = (section) => {
    setOpenSection(openSection === section ? null : section);
  };

  return (
    <div className="w-full max-w-4xl mx-auto bg-white rounded-lg shadow-lg">
      <div className="bg-gradient-to-r from-blue-500 to-blue-700 p-6 rounded-t-lg">
        <h2 className="text-3xl text-center text-white font-bold">
          Szorongáscsökkentő Technikák
        </h2>
      </div>
      <div className="p-6">
        {Object.entries(techniques).map(([category, items]) => (
          <div key={category} className="mb-6 border rounded-lg shadow-sm">
            <button
              onClick={() => toggleSection(category)}
              className="w-full flex items-center justify-between p-4 bg-blue-100 hover:bg-blue-200 text-left transition-colors duration-200 rounded-t-lg"
            >
              <span className="text-lg font-semibold text-blue-900">{category}</span>
              {openSection === category ? (
                <ChevronDown className="h-5 w-5 text-blue-700" />
              ) : (
                <ChevronRight className="h-5 w-5 text-blue-700" />
              )}
            </button>
            <div
              className={`mt-2 space-y-3 p-4 bg-blue-50 rounded-b-lg transition-all duration-300 ${
                openSection === category ? 'block' : 'hidden'
              }`}
            >
              {items.map((item, index) => (
                <div
                  key={index}
                  className="p-4 bg-white border border-blue-200 rounded-md shadow-md flex justify-between items-center hover:bg-blue-100 transition-colors duration-200"
                >
                  <div>
                    <h3 className="font-medium text-blue-900">{item.name}</h3>
                    <p className="text-sm text-blue-700">{item.desc}</p>
                  </div>
                  <a
                    href={item.link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="p-2 bg-blue-200 hover:bg-blue-300 rounded-full transition-colors duration-200"
                    title="További információ"
                  >
                    <ExternalLink className="h-5 w-5 text-blue-700" />
                  </a>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default AnxietyTechniques;