import React, {ReactNode} from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import {Pressable} from '@components/_core/Pressable';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  children: ReactNode;
  isSelected?: boolean;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
  disabled?: boolean;
}

export function SelectionCard({
  children,
  isSelected,
  onPress,
  style,
  disabled,
}: Props) {
  const {theme} = useTheme();

  const backgroundColor = isSelected
    ? theme.action.background.brand.default
    : disabled
    ? theme.action.background.brand.disabled
    : theme.background.elements.default;
  const borderColor = isSelected
    ? theme.button.background.primary.default
    : disabled
    ? theme.border.neutral.default
    : theme.border.neutral.default;

  return (
    <Pressable
      backgroundColor={backgroundColor}
      onPress={onPress}
      disabled={disabled}
      style={[styles.container, {borderColor}, style]}>
      {children}
    </Pressable>
  );
}