/**
 * AbsoluteFill — Drop-in replacement for Remotion's <AbsoluteFill>.
 *
 * A <div> that fills its parent with position:absolute and inset:0.
 * Used for layering content in compositions.
 */
import React, { forwardRef } from 'react';

export const AbsoluteFill = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ style, children, ...props }, ref) => (
  <div
    ref={ref}
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      width: '100%',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      ...style,
    }}
    {...props}
  >
    {children}
  </div>
));

AbsoluteFill.displayName = 'AbsoluteFill';
