import { Text } from '@/aesthetics/Text';
import { colors, font, getNutrientColor, radius, spacing, useColors } from '@/aesthetics/styles';
import { StyleSheet, View, type ViewStyle } from 'react-native';

type NutrientTileProps = {
  symbol: string;
  label: string;
  fillPct: number;
  style?: ViewStyle;
};

export function NutrientTile({ symbol, label, fillPct, style }: NutrientTileProps) {
  const c = useColors();
  const bgColor = getNutrientColor(fillPct, c);

  return (
    <View style={[styles.tile, { backgroundColor: bgColor }, style]}>
      <Text style={styles.symbol}>{symbol}</Text>
      <Text style={styles.label} numberOfLines={1}>
        {label}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  tile: {
    borderRadius: radius.sm,
    padding: spacing.xs,
    alignItems: 'center',
    justifyContent: 'center',
  },
  symbol: {
    fontSize: font.lg,
    fontWeight: '600',
    letterSpacing: -0.5,
    color: colors.light.onAccent,
  },
  label: {
    fontSize: 9,
    marginTop: 2,
    textAlign: 'center',
    color: colors.light.onAccentMuted,
  },
});