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

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

interface DepositRatePillProps {
  rate: number;
}

const DepositRatePillComponent = ({ rate }: DepositRatePillProps) => {
  const theme = useTheme();

  return (
    <View
      style={[
        styles.pill,
        {
          backgroundColor: 'rgba(53, 214, 163, 0.12)',
          borderColor: theme.colors.cardBorder,
          borderRadius: theme.radius.pill,
        },
      ]}
    >
      <Text style={[styles.text, { color: theme.colors.accent }]}>Up to {rate}% p.a.</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  pill: {
    alignSelf: 'flex-start',
    borderWidth: 1,
    paddingHorizontal: 12,
    paddingVertical: 6,
  },
  text: {
    fontSize: 12,
    fontWeight: '700',
  },
});

export const DepositRatePill = memo(DepositRatePillComponent);