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

const showPanel = keyframes`
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
`;

const showPanelAnimation = css`
  animation: ${showPanel} 0.2s;
`;

export type PanelBodyProps = {
  animate?: boolean;
  hidden?: boolean;
};

export const PanelBody = styled.div.attrs<{ className?: string }>(({ className }) => ({
  'data-component-name': 'Panel/PanelBody',
  className,
}))<PanelBodyProps>`
  ${({ animate }) => animate && showPanelAnimation};
  ${({ hidden }) => hidden && 'visibility: hidden'};

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

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

  border-top-left-radius: var(--panel-border-radius);
  border-top-right-radius: var(--panel-border-radius);
  border-bottom-right-radius: var(--panel-border-radius);
  border-bottom-left-radius: var(--panel-border-radius);
`;