import { forwardRef } from 'react';

import { Position } from '..';
import BottomSheet from '../bottomSheet';
import { useLayout } from '../hooks';
import Panel, { type PanelProps } from '../panel';

const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(
  {
    anchorRef,
    arrow = false,
    flip = true,
    children,
    className = undefined,
    onClose,
    open = false,
    position = Position.BOTTOM,
    anchorWidth = false,
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledBy,
  }: PanelProps,
  reference,
) {
  const { isMobile } = useLayout();
  if (isMobile) {
    return (
      <BottomSheet
        key="bottomSheet"
        aria-label={ariaLabel}
        aria-labelledby={ariaLabelledBy}
        open={open}
        className={className}
        onClose={onClose}
      >
        {children}
      </BottomSheet>
    );
  }
  return (
    <Panel
      key="panel"
      ref={reference}
      flip={flip}
      arrow={arrow}
      open={open}
      position={position}
      anchorWidth={anchorWidth}
      anchorRef={anchorRef}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledBy}
      className={className}
      onClose={onClose}
    >
      {children}
    </Panel>
  );
});

export default ResponsivePanel;
