import React from 'react';
import styled, { keyframes, css } from 'styled-components';

import type { JSX, ReactNode } from 'react';

type AccordionBodyWrapperProps = {
  $animate?: boolean;
  $hidden?: boolean;
};

export type AccordionBodyProps = {
  animate?: boolean;
  hidden?: boolean;
  children?: ReactNode;
  className?: string;
};

export function AccordionBody({
  animate,
  hidden,
  children,
  className,
}: AccordionBodyProps): JSX.Element {
  return (
    <AccordionBodyWrapper
      className={className}
      $animate={animate}
      $hidden={hidden}
      data-component-name="Accordion/AccordionBody"
    >
      {children}
    </AccordionBodyWrapper>
  );
}

const showAccordion = keyframes`
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
`;

const showAccordionAnimation = css`
  animation: ${showAccordion} 0.15s ease-out;
`;

const AccordionBodyWrapper = styled.div<AccordionBodyWrapperProps>`
  ${({ $animate }) => $animate && showAccordionAnimation};
  ${({ $hidden }) => $hidden && 'visibility: hidden'};

  background-color: var(--accordion-body-bg-color);

  font-family: var(--accordion-body-font-family);
  font-size: var(--accordion-body-font-size);
  font-weight: var(--accordion-body-font-weight);
  border: var(--accordion-body-border);
  padding: var(--accordion-body-padding);
  color: var(--accordion-body-text-color);

  border-radius: var(--accordion-border-radius);
`;