import React from 'react';
import {View, StyleSheet, ViewStyle} from 'react-native';
import Icon from './icon';
import {$Colors} from './style';

export type StarsProps = {
    starLevel: number;
    style?: ViewStyle;
};

const stars = ['1', '2', '3', '4', '5'];
const colors = [$Colors.fourth, $Colors.fourth, $Colors.fourth, $Colors.third, $Colors.secondary];
const Stars: React.FC<StarsProps> = ({starLevel, style}) => {
    const level = Math.round(starLevel);
    const _color = colors[level-1];
    return (
        <View style={[styles.wrapper, style]}>
            {stars.map((item, index) => (
                <Icon name="star" style={[styles.star, {color: level > index ? _color : $Colors.lighterText}]} key={item} />
            ))}
        </View>
    );
};
export default React.memo(Stars, (prev, next) => {
    return prev.starLevel === next.starLevel;
});

const styles = StyleSheet.create({
    wrapper: {
        display: 'flex',
        flexDirection: 'row',
        height: 12,
    },
    star: {
        marginRight: 1,
        fontSize: 12,
    },
});