"use client";

import cx from "classnames";
import React from "react";
import type { AccordionItemProps } from "../Accordion/AccordionItem";
import { AccordionItem } from "../Accordion/AccordionItem";
import type { FeatureAccordionImage } from "./FeatureAccordion";

const CLASS_ROOT = "feature-accordion__item";
const CLASS_CONTENT = "feature-accordion__content";

interface FeatureAccordionItemProps extends AccordionItemProps {
  image?: string | FeatureAccordionImage;
  imageUrl?: string;
  imageAlt?: string;
  imageSrcSet?: string;
  [key: string]: any;
}

const FeatureAccordionItem: React.FC<FeatureAccordionItemProps> = ({
  image: _image,
  imageUrl: _imageUrl,
  imageAlt: _imageAlt,
  imageSrcSet: _imageSrcSet,
  className,
  children,
  ...props
}) => {
  return (
    <AccordionItem
      className={cx(CLASS_ROOT, className)}
      children={<div className={CLASS_CONTENT}>{children}</div>}
      toggleAttribute="data-feature-accordion-toggle"
      {...props}
    />
  );
};

FeatureAccordionItem.displayName = "FeatureAccordionItem";

export { FeatureAccordionItem };