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

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

  return (
    <details
      className={combinedClasses}
      style={style}
      data-card-variant={variant}
    >
      {children}
    </details>
  );
};

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

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

export default AccordionItem;
