import React, {ReactNode, useCallback, memo} from 'react';
import {Pressable, ViewProps} from 'react-native';
import {styles} from './styles';

interface ControlProps extends ViewProps {
  children: ReactNode;
  callback?: () => void;
  disabled?: boolean;
  style?: any;
  resetControlTimeout?: () => void;
}

/**
 * A lightweight, performant control button for the video player.
 * Uses Pressable for instant touch feedback and minimal overhead.
 */
const Control = memo(
  ({
    children,
    callback,
    disabled = false,
    style = {},
    resetControlTimeout,
    ...props
  }: ControlProps) => {
    const handlePress = useCallback(() => {
      if (resetControlTimeout) {
        resetControlTimeout();
      }
      if (callback) {
        callback();
      }
    }, [callback, resetControlTimeout]);

    return (
      <Pressable
        disabled={disabled}
        onPress={handlePress}
        style={({pressed}) => [
          styles.control,
          style,
          pressed && {opacity: 0.7},
          disabled && {opacity: 0.4},
        ]}
        android_ripple={{color: 'rgba(255,255,255,0.2)', borderless: false}}
        {...props}>
        {children}
      </Pressable>
    );
  },
);

Control.displayName = 'Control';

// ✅ Export both default and named for flexibility
export default Control;
export {Control};