import { useGateValue } from '@statsig/react-bindings';
import clsx from 'clsx';

import { SparklesIcon } from '@/icons';
import { Clip } from '@/state/clipStore';

import Button, { ButtonShape, ButtonSize, ButtonVariant } from './Button';

interface AnimateCoverPillProps {
  clip: Clip;
  onClick: () => void;
  className?: string;
  size?: ButtonSize;
}

/**
 * A reusable pill button that shows "Animate" for clips that don't have a video cover.
 *
 * This component:
 * - Only renders when the clip doesn't have a video cover
 * - Is gated by the 'gen-video-covers' feature flag
 * - Opens the cover generation modal when clicked
 */
export default function AnimateCoverPill({
  clip,
  onClick,
  className,
  size,
}: AnimateCoverPillProps) {
  const enableGenerateCovers = useGateValue('gen-video-covers');
  const shouldShow = !clip.video_cover_url && enableGenerateCovers;

  if (!shouldShow) {
    return null;
  }

  return (
    <Button
      className={clsx('text-foreground-on-dark pointer-events-auto', className)}
      variant={ButtonVariant.Smoke}
      size={size || ButtonSize.Small}
      shape={ButtonShape.Pill}
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
      icon={SparklesIcon}
      aria-label='Animate Cover'
    >
      Animate
    </Button>
  );
}