import React, { memo } from 'react';
import { Pressable, StyleSheet, Text } from 'react-native';

import { useTheme } from '../../../theme';

interface DepositOptionChipProps {
  label: string;
  selected: boolean;
  onPress: () => void;
}

const DepositOptionChipComponent = ({
  label,
  selected,
  onPress,
}: DepositOptionChipProps) => {
  const theme = useTheme();

  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.chip,
        {
          backgroundColor: selected ? `${theme.colors.primary}12` : theme.colors.surfaceMuted,
          borderColor: selected ? `${theme.colors.primary}40` : theme.colors.cardBorder,
          opacity: pressed ? 0.9 : 1,
          transform: [{ scale: pressed ? 0.98 : 1 }],
        },
      ]}
    >
      <Text
        style={[
          styles.label,
          { color: selected ? theme.colors.primary : theme.colors.textSecondary },
        ]}
      >
        {label}
      </Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  chip: {
    borderWidth: 1,
    borderRadius: 999,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  label: {
    fontSize: 12,
    fontWeight: '700',
  },
});

export const DepositOptionChip = memo(DepositOptionChipComponent);