'use client';

import { MediaControlBar } from 'media-chrome/react';
import { cn } from '@djangocfg/ui-core/lib';
import type { ComponentProps } from 'react';

export type ControlsBarProps = ComponentProps<typeof MediaControlBar>;

/**
 * Control bar pinned to the bottom over a bottom-up black scrim so the
 * controls stay legible on any video frame. Colours read on-black
 * regardless of theme — the video canvas is always a black surface.
 *
 * The bar participates in media-chrome's `autohide`: when the
 * `<MediaController>` adds the `mediacontrolshidden` user-inactive
 * state, we fade the whole bar (controls + scrim) out together.
 */
export function ControlsBar({ className, children, ...props }: ControlsBarProps) {
  return (
    <MediaControlBar
      {...props}
      className={cn(
        // Layout — extra top padding gives the scrim room to fade in.
        'video-player__control-bar',
        'absolute inset-x-0 bottom-0 flex items-center gap-1 px-2 pb-1.5 pt-8',
        // Bottom-up scrim so controls read over any frame.
        'bg-gradient-to-t from-black/75 via-black/40 to-transparent',
        'text-foreground',
        className,
      )}
    >
      {children}
    </MediaControlBar>
  );
}