import React, { memo, useState } from 'react';
import { SFilterCheckboxContainer } from '../../s-components/s-filter-checkbox-container';
import { Touchable } from '../../../common/components/touchable';

type TProps = {
  onPress?: () => void;
  children: React.ReactNode;
};

export const PopupPressableRow: React.FC<TProps> = memo(
  ({ children, onPress }) => {
    const [pressed, setPressed] = useState(false);

    return (
      <Touchable
        testID="popup-filter-checkbox"
        onPressIn={() => {
          setPressed(true);
        }}
        onPressOut={() => {
          setPressed(false);
        }}
        onPress={onPress}
      >
        <SFilterCheckboxContainer pressed={pressed}>
          {children}
        </SFilterCheckboxContainer>
      </Touchable>
    );
  }
);