import { ReactNode } from "react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { SectionHeader } from "@/components/section-header/components/section-header";
import { Container } from "@/components/container/components/container";

interface FAQItem {
  question: string;
  answer: ReactNode;
}

interface FAQ1Props {
  overline?: string;
  title?: string;
  items: FAQItem[];
  className?: string;
  defaultOpen?: boolean;
}

const FAQ = [
  {
    question: "How does your wellness program work?",
    answer: (
      <>
        <p>
          Our wellness program is designed to help you build mindful habits and
          make sustainable lifestyle changes. Each week, you’ll receive
          practical tips, guided exercises, and eco-friendly product
          recommendations to support your journey toward balance and well-being.
        </p>
        <p>
          You can start at your own pace and track your progress over time —
          it’s all about creating small, meaningful shifts that last.
        </p>
      </>
    ),
  },
  {
    question: "What are the benefits of choosing eco-friendly products?",
    answer: (
      <>
        <p>
          Eco-friendly products are designed to reduce waste, conserve natural
          resources, and promote a healthier home environment. They’re better
          for you, your family, and the planet.
        </p>
        <p>
          By making conscious choices, you’re contributing to a more sustainable
          future — one purchase at a time.
        </p>
      </>
    ),
  },
  {
    question: "Can I personalize my wellness plan?",
    answer: (
      <>
        <p>
          Absolutely! You can tailor your plan to match your lifestyle, goals,
          and pace. Choose from various focus areas — like mindfulness,
          nutrition, movement, or sustainable living — and we’ll recommend
          content and products that fit your needs.
        </p>
      </>
    ),
  },
  {
    question: "Can I customize the look of my products or packaging?",
    answer: (
      <>
        <p>
          Yes! Many of our products offer customizable options, from colors and
          materials to personalized packaging. It’s a great way to make your
          eco-friendly essentials truly your own — or create thoughtful,
          sustainable gifts.
        </p>
      </>
    ),
  },
  {
    question: "Are your products compatible with other lifestyle brands?",
    answer: (
      <>
        <p>
          Definitely. Our eco-friendly essentials are made to integrate
          seamlessly with your daily routine and complement other sustainable
          brands you already love. Everything is designed with quality,
          simplicity, and environmental responsibility in mind.
        </p>
      </>
    ),
  },
];

export function FAQ1({
  overline = "Got questions?",
  title = "Frequently Asked Questions",
  items = FAQ,
  defaultOpen = false,
}: FAQ1Props) {
  return (
    <Container
      className="grid gap-2 mx-auto max-w-7xl"
      wrapperClassName="py-32"
    >
      <SectionHeader overline={overline} title={title} size="md" />
      <Accordion
        type="multiple"
        className="m-0"
        defaultValue={
          defaultOpen ? items.map((_, index) => `item-${index}`) : undefined
        }
      >
        {items.map((item, index) => (
          <AccordionItem
            key={index}
            value={`item-${index}`}
            className="border-dashed"
          >
            <AccordionTrigger className="text-left tracking-tight font-semibold">
              {item.question}
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground text-sm leading-6 tracking-tight grid gap-6 my-2 [&>p]:m-0 [&>p]:leading-6 text-balance">
              {item.answer}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </Container>
  );
}
FAQ blocks
