import { Position } from '../common';
import SlidingPanel from '../slidingPanel';
import { FunctionComponent } from 'react';

export interface StickyProps {
  /** Optional prop for children components to be rendered inside the Sticky component. */
  children?: React.ReactNode;

  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */
  open?: boolean;

  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */
  position?: `${Position.TOP}` | `${Position.BOTTOM}`;

  /** Optional prop to specify the ID used for testing */
  testId?: string;
}

/**
 * ### Sticky Component
 *
 * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.
 * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,
 * based on the `open` prop. It can be positioned at the top or bottom of the container,
 * as specified by the `position` prop.
 *
 * @component
 * @param {ReactNode} children - Children content.
 * @param {boolean} open - Determines if the Sticky component is open or closed.
 * @param {('top'|'bottom')} position - Specifies the position.
 * @param {string} testId - ID used for testing.
 * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.
 * @example
 * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>
 * <Sticky open={open} position={'bottom'}>
 *   <div>
 *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>
 *   </div>
 * </Sticky>
 */
const Sticky: FunctionComponent<StickyProps> = ({
  children,
  open = true,
  position = Position.BOTTOM,
  testId,
}: StickyProps) => {
  return (
    <SlidingPanel
      testId={testId}
      open={open}
      position={position}
      slidingPanelPositionFixed
      showSlidingPanelBorder
    >
      {children}
    </SlidingPanel>
  );
};

export default Sticky;