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

import { useTheme } from '@/hooks/use-theme';
import type { PlayerId } from '@/lib/types';

export function usePlayerColor(playerId: PlayerId) {
  const theme = useTheme();
  return playerId === 'p1' ? theme.playerOne : theme.playerTwo;
}

export function usePlayerSoftColor(playerId: PlayerId) {
  const theme = useTheme();
  return playerId === 'p1' ? theme.playerOneSoft : theme.playerTwoSoft;
}

export function PlayerAvatar({
  playerId,
  initial,
  size = 28,
}: {
  playerId: PlayerId;
  initial: string;
  size?: number;
}) {
  const color = usePlayerColor(playerId);
  return (
    <View style={[styles.circle, { backgroundColor: color, width: size, height: size }]}>
      <Text style={[styles.initial, { fontSize: size * 0.42 }]}>{initial.toUpperCase()}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  circle: {
    borderRadius: 999,
    alignItems: 'center',
    justifyContent: 'center',
  },
  initial: {
    color: '#FFFFFF',
    fontWeight: '800',
  },
});