import { type ReactNode, useId, useState } from 'react';

import { cn } from '@admin/lib/utils';

type AccordionProps = {
    children: ReactNode;
    className?: string;
};

type AccordionItemProps = {
    title: string;
    summary?: string;
    defaultOpen?: boolean;
    children: ReactNode;
};

export function Accordion({ children, className }: AccordionProps) {
    return <div className={cn('hs-accordion-group', className)}>{children}</div>;
}

export function AccordionItem({ title, summary, defaultOpen = false, children }: AccordionItemProps) {
    const [open, setOpen] = useState(defaultOpen);
    const headingId = useId();
    const panelId = useId();

    return (
        <div
            className={cn(
                'hs-accordion bg-white border -mt-px first:rounded-t-sm last:rounded-b-sm dark:bg-bgdark dark:border-white/10',
                open && 'active',
            )}
            id={headingId}
        >
            <button
                type="button"
                className="hs-accordion-toggle hs-accordion-active:text-primary py-4 px-5 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-primary dark:text-gray-200 dark:hover:text-white/80"
                aria-expanded={open}
                aria-controls={panelId}
                onClick={() => setOpen((current) => !current)}
            >
                <i className={cn('text-gray-600 dark:text-white/70', open ? 'ri-subtract-line' : 'ri-add-line')} />
                <span className="flex min-w-0 flex-1 flex-col items-start gap-1">
                    <span>{title}</span>
                    {!open && summary ? (
                        <span className="font-normal text-xs text-gray-500 dark:text-white/70">{summary}</span>
                    ) : null}
                </span>
            </button>
            <div
                id={panelId}
                role="region"
                aria-labelledby={headingId}
                className={cn(
                    'hs-accordion-content w-full overflow-hidden transition-[height] duration-300',
                    !open && 'hidden',
                )}
            >
                <div className="pb-4 px-5">{children}</div>
            </div>
        </div>
    );
}