import * as React from "react";
import { useState } from "react";
import { motion } from "framer-motion";

const faqData = [
  {
    title: "Program Details",
    content: [
      "What sets Harvey Brooker Weight Loss for Men apart?",
      "Why is this a men's only program?",
      "How does your program work?",
      "How overweight do I need to be to join?",
      "What is the 20/20 Healthy Eating Plan?"
    ]
  },
  {
    title: "Membership Details",
    content: [
      "What is included with my membership?",
      "What is a Harvey Brooker Maintainer?",
      "What is the cost of the Harvey Brooker program?",
      "What are HB Meals?"
    ]
  },
  {
    title: "Getting Started",
    content: [
      "How fast will I lose weight?",
      "How do I get started?",
      "What can I expect during my free consultation?",
      "Is your program covered by insurance?"
    ]
  },
  {
    title: "Health & Weight Loss",
    content: [
      "Should I join if I have health issues related to excess weight?",
      "What are the age requirements to join?",
      "Do you offer injections, pills or supplements?"
    ]
  }
];

export function HorizontalAccordion() {
  const [activeIndex, setActiveIndex] = useState(null);

  return (
    <div style={{ display: "flex", width: "100%", height: 300 }}>
      {faqData.map((item, index) => {
        const isActive = activeIndex === index;

        return (
          <motion.div
            key={index}
            onClick={() => setActiveIndex(index)}
            animate={{ width: isActive ? 400 : 100 }}
            transition={{ duration: 0.3 }}
            style={{
              overflow: "hidden",
              background: isActive ? "#f3f3f3" : "#ccc",
              cursor: "pointer",
              borderRight: "1px solid #999",
              height: "100%",
              display: "flex",
              flexDirection: "column"
            }}
          >
            <div style={{ padding: 10, fontWeight: "bold" }}>{item.title}</div>
            {isActive && (
              <div style={{ padding: 10 }}>
                <ul style={{ paddingLeft: 16 }}>
                  {item.content.map((q, i) => (
                    <li key={i} style={{ marginBottom: 8 }}>{q}</li>
                  ))}
                </ul>
              </div>
            )}
          </motion.div>
        );
      })}
    </div>
  );
}