'use client';

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

export type SeekBarProps = ComponentProps<typeof MediaTimeRange> & {
  readonly showTime?: boolean;
};

export function SeekBar({ className, showTime = true, ...props }: SeekBarProps) {
  return (
    <>
      <MediaTimeRange
        {...props}
        className={cn('h-8 flex-1', className)}
      />
      {showTime && (
        <MediaTimeDisplay
          showDuration
          className="video-player__time px-2 text-xs tabular-nums"
        />
      )}
    </>
  );
}