'use client';

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

export type PlaybackRateProps = Omit<
  ComponentProps<typeof MediaPlaybackRateButton>,
  'rates'
> & {
  /** Space-separated list, e.g. `'0.5 1 1.5 2'`, or an array of numbers. */
  readonly rates?: string | readonly number[];
};

const DEFAULT_RATES: readonly number[] = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];

export function PlaybackRate({ className, rates, ...props }: PlaybackRateProps) {
  const value = rates ?? DEFAULT_RATES;
  return (
    <MediaPlaybackRateButton
      {...props}
      // media-chrome's setter accepts `string | ArrayLike<number>` — the
      // React typing pulls from the getter only, which is narrower.
      rates={value as unknown as ArrayLike<number>}
      className={cn(
        'video-player__control h-8 px-2 text-xs tabular-nums',
        className,
      )}
    />
  );
}
