import styled from '@emotion/styled';
import { InputSkeleton, type InputSkeletonProps } from '@os-design/core';
import { forwardRef } from 'react';

export type EditorSkeletonProps = InputSkeletonProps;

const StyledEditorSkeleton = styled(InputSkeleton)`
  height: ${(p) => p.theme.editorMinHeight}em;
`;

/**
 * Provides an editor placeholder while a user waits for the content to load.
 */
const EditorSkeleton = forwardRef<HTMLDivElement, EditorSkeletonProps>(
  (props, ref) => <StyledEditorSkeleton {...props} ref={ref} />
);

EditorSkeleton.displayName = 'EditorSkeleton';

export default EditorSkeleton;