commerce/components/page/accordion-block-item.tsx

'use client';

import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
import { ChevronRightIcon } from '@heroicons/react/24/outline';
import { ReactNode } from 'react';

const AccordionBlockItem = ({
  title,
  children,
  defaultOpen
}: {
  title: string;
  children: ReactNode;
  defaultOpen?: boolean;
}) => {
  return (
    <Disclosure defaultOpen={defaultOpen} as="div" className="pt-6">
      <dt>
        <DisclosureButton className="group flex w-full items-start justify-between text-left text-gray-900">
          <span className="text-lg font-medium text-blue-800">{title}</span>
          <ChevronRightIcon className="size-5 group-data-[open]:rotate-90 group-data-[open]:text-primary" />
        </DisclosureButton>
      </dt>
      <DisclosurePanel as="dd" className="mt-2 flex flex-col gap-4 py-4">
        {children}
      </DisclosurePanel>
    </Disclosure>
  );
};

export default AccordionBlockItem;