'use client';

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

export type CenterPlayProps = ComponentProps<typeof MediaPlayButton>;

/**
 * Big centered play affordance shown over the poster / paused frame
 * (YouTube / Telegram style). A translucent dark disc with a white glyph so
 * it stays legible on ANY poster — light or dark. It lives in media-chrome's
 * `centered-chrome` slot and is faded out while playing via CSS (see
 * `video-player.css` → `.vp-center-play`).
 */
export function CenterPlay({ className, ...props }: CenterPlayProps) {
  return (
    <MediaPlayButton
      {...props}
      slot="centered-chrome"
      tabIndex={-1}
      aria-hidden="true"
      className={cn('vp-center-play', className)}
    />
  );
}