'use client';

import { useState } from 'react';
import { Icon } from './icon';
import { twMerge } from 'tailwind-merge';
import { AccordionProps } from '@theme/components/types/index';

export const Accordion = ({
  isCollapse = false,
  collapseClassName,
  title,
  subTitle,
  icons = ['chevron-up', 'chevron-down'],
  iconSize = 16,
  iconColor = 'fill-[#000000]',
  leftIcon,
  leftIconSize = 20,
  leftIconClassName,
  children,
  headerClassName,
  className,
  titleClassName,
  subTitleClassName,
  dataTestId,
  contentClassName
}: AccordionProps) => {
  const [collapse, setCollapse] = useState(isCollapse);

  return (
    <div
      className={twMerge(
        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none last:mb-0',
        className
      )}
    >
      <div
        className={twMerge(
          'flex items-center justify-between cursor-pointer',
          headerClassName
        )}
        onClick={() => setCollapse(!collapse)}
        data-testid={dataTestId}
      >
        <div className={twMerge('flex items-center gap-3', contentClassName)}>
          {leftIcon && (
            <Icon
              name={leftIcon}
              size={leftIconSize}
              className={leftIconClassName}
            />
          )}
          <div className="flex flex-col">
            {title && (
              <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
            )}
            {subTitle && (
              <h4
                className={twMerge('text-xs text-gray-700', subTitleClassName)}
              >
                {subTitle}
              </h4>
            )}
          </div>
        </div>

        {icons && (
          <Icon
            name={collapse ? icons[0] : icons[1]}
            size={iconSize}
            style={{
              color: iconColor.startsWith('#') ? iconColor : `#${iconColor}`,
              width: `${iconSize}px`,
              height: `${iconSize}px`,
              minWidth: `${iconSize}px`,
              minHeight: `${iconSize}px`,
              maxWidth: `${iconSize}px`,
              maxHeight: `${iconSize}px`
            }}
          />
        )}
      </div>
      {collapse && (
        <div className={twMerge('mt-3 text-sm', collapseClassName)}>
          {children}
        </div>
      )}
    </div>
  );
};
