import styles from './index.module.scss';
import StyleFields from './StyleFields.js';
import cx from '../../utils/classname.js';
import { mapVariantToCssVars } from '../../utils/cssVars.js';
import { CSSVariables } from '../../utils/types.js';
import { AccordionItemProps } from './types.js';

const AccordionItemComponent = ({
  variant = 'variant1',
  className = '',
  style = {},
  children,
}: AccordionItemProps) => {
  const combinedClasses = cx(styles.accordionItem, className);

  const cssVariables: CSSVariables = variant
    ? mapVariantToCssVars('--hscl-accordion', variant, [
        'borderColor',
        'borderRadius',
        'borderWidth',
        'backgroundColor',
        'color',
        'icon-fill',
      ])
    : {};

  return (
    <details className={combinedClasses} style={{ ...cssVariables, ...style }}>
      {children}
    </details>
  );
};

type AccordionItemComponentType = typeof AccordionItemComponent & {
  StyleFields: typeof StyleFields;
};

const AccordionItem = AccordionItemComponent as AccordionItemComponentType;
AccordionItem.StyleFields = StyleFields;

export default AccordionItem;
