import React, { forwardRef } from "react";
import { theme, styled } from "../theme";
import { Accordion as AccordionPrimitive } from "radix-ui";
import type * as WPDS from "../theme";

const StyledAccordionItem = styled(AccordionPrimitive.Item, {
  borderBottom: `1px solid ${theme.colors.outline}`,
});

type AccordionItemProps = WPDS.VariantProps<typeof StyledAccordionItem> &
  AccordionPrimitive.AccordionItemProps;

export interface AccordionItemInterface extends AccordionItemProps {
  css?: WPDS.CSS;
}

export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemInterface>(
  ({ children, ...props }: AccordionItemInterface, ref) => (
    <StyledAccordionItem {...props} ref={ref}>
      {children}
    </StyledAccordionItem>
  )
);

AccordionItem.displayName = "AccordionItem";