'use client';

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

export interface VolumeProps {
  readonly className?: string;
  readonly iconOnly?: boolean;
  readonly muteProps?: ComponentProps<typeof MediaMuteButton>;
  readonly rangeProps?: ComponentProps<typeof MediaVolumeRange>;
}

export function Volume({ className, iconOnly, muteProps, rangeProps }: VolumeProps) {
  return (
    <div className={cn('flex items-center', className)}>
      <MediaMuteButton
        {...muteProps}
        className={cn(
          'media-control-square video-player__control h-8 w-8',
          muteProps?.className,
        )}
      />
      {!iconOnly && (
        <MediaVolumeRange
          {...rangeProps}
          className={cn('h-8 w-20', rangeProps?.className)}
        />
      )}
    </div>
  );
}
