/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import clsx from 'clsx';
import { PropsWithChildren, useRef, useState } from 'react';
import { twMerge } from 'tailwind-merge';

import { ChevronDownIcon } from '@/icons';

interface CollapsibleProps {
  showText: string;
  hideText: string;
  hideByDefault?: boolean;
  textClassName?: string;
}

export const Collapsible: React.FC<PropsWithChildren<CollapsibleProps>> = ({
  showText,
  hideText,
  children,
  hideByDefault = true,
  textClassName = '',
}: PropsWithChildren<CollapsibleProps>) => {
  const [isShown, setIsShown] = useState(!hideByDefault);
  const innerRef = useRef<any>(undefined);
  return (
    <>
      <span
        className='flex cursor-pointer flex-row items-center gap-2 text-base text-foreground-primary select-none hover:brightness-90'
        onClick={() => setIsShown(!isShown)}
      >
        <ChevronDownIcon
          className={clsx({
            'h-4 w-4 transition-transform duration-200 ease-linear': true,
            'rotate-180': isShown,
          })}
        />
        {isShown ? hideText : showText}
      </span>
      <div
        className={twMerge(
          clsx({
            'overflow-hidden transition-all duration-300 ease-in-out': true,
            // 'max-h-96': isShown,
            'max-h-0': !isShown,
          }),
          textClassName
        )}
      >
        <div ref={innerRef}>{children}</div>
      </div>
    </>
  );
};