"use client";

import cx from "classnames";
import React from "react";
import { AccordionItem, AccordionItemProps } from "../Accordion/AccordionItem";

const CLASS_ROOT = "feature-accordion__item";

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

const FeatureAccordionItem: React.FC<FeatureAccordionItemProps> = ({
  image,
  imageUrl,
  imageAlt,
  imageSrcSet,
  className,
  ...props
}) => {
  const dataImageUrl = props["data-image-url"] || imageUrl;
  const dataImageAlt = props["data-image-alt"] || imageAlt;
  const dataImage = props["data-image"] || image;
  const dataImageSrcSet = props["data-image-srcset"] || imageSrcSet;

  return (
    <AccordionItem
      className={cx(CLASS_ROOT, className)}
      data-image-url={dataImageUrl}
      data-image-alt={dataImageAlt}
      data-image={dataImage}
      data-image-srcset={dataImageSrcSet}
      toggleAttribute="data-feature-accordion-toggle"
      {...props}
    />
  );
};

FeatureAccordionItem.displayName = "FeatureAccordionItem";

export { FeatureAccordionItem };
