import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { Colors } from 'src/theme';

export const Star = ({ filled }: { filled: number }) => {
  return (
    <View style={styles.container}>
      <FontAwesome name="star-o" size={15} color={Colors.DARK_BLUE} />
      <View style={[styles.star, { width: `${filled * 100}%` }]}>
        <FontAwesome name="star" size={15} color={Colors.DARK_BLUE} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: 15,
    height: 15
  },
  star: {
    position: 'absolute',
    top: 0,
    left: 0,
    height: '100%',
    overflow: 'hidden'
  }
});
