'use client';

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

export const Accordion = ({
  isCollapse = false,
  collapseClassName,
  title,
  subTitle,
  icons = ['chevron-up', 'chevron-down'],
  iconSize = 16,
  iconColor = 'fill-[#000000]',
  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',
        className
      )}
    >
      <div
        className={twMerge(
          'flex items-center justify-between cursor-pointer',
          headerClassName
        )}
        onClick={() => setCollapse(!collapse)}
        data-testid={dataTestId}
      >
        <div className={twMerge('flex flex-col', contentClassName)}>
          {title && (
            <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
          )}
          {subTitle && (
            <h4 className={twMerge('text-xs text-gray-700', subTitleClassName)}>
              {subTitle}
            </h4>
          )}
        </div>

        {icons && (
          <Icon
            name={collapse ? icons[0] : icons[1]}
            size={iconSize}
            className={`fill-[${iconColor}]}`}
          />
        )}
      </div>
      {collapse && (
        <div className={twMerge('mt-3 text-sm', collapseClassName)}>
          {children}
        </div>
      )}
    </div>
  );
};