Collapsible

import { Collapsible } from "@ark-ui/react/collapsible";
import { ChevronDownIcon } from "lucide-react";

const faqs = [
  {
    question: "What is the return policy?",
    answer:
      "You can return any item within 30 days of purchase for a full refund, provided it's in its original condition.",
  },
  {
    question: "How long does shipping take?",
    answer:
      "Standard shipping takes 5-7 business days. Express shipping is available for 2-3 business days.",
  },
  {
    question: "Do you ship internationally?",
    answer:
      "Yes, we ship to most countries worldwide. International shipping typically takes 7-14 business days.",
  },
];

export default function FAQStyleCollapsible() {
  return (
    <div className="w-full max-w-2xl space-y-4">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">
        Frequently Asked Questions
      </h3>
      {faqs.map((faq, index) => (
        <Collapsible.Root
          key={index}
          className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"
        >
          <Collapsible.Trigger className="w-full flex items-center justify-between px-6 py-4 text-left bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 group">
            <span className="font-medium text-gray-900 dark:text-gray-100 pr-4">
              {faq.question}
            </span>
            <Collapsible.Indicator className="transition-transform duration-200 shrink-0 data-[state=open]:rotate-180">
              <ChevronDownIcon className="w-5 h-5 text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300" />
            </Collapsible.Indicator>
          </Collapsible.Trigger>
          <Collapsible.Content className="overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1">
            <div className="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
              <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
                {faq.answer}
              </p>
            </div>
          </Collapsible.Content>
        </Collapsible.Root>
      ))}
    </div>
  );
}