import { Paper, useMantineTheme } from "@mantine/core";
import { Facehash } from "facehash";

interface PlayerAvatarProps {
  name?: string;
  size?: number;
  disableFullscreen?: boolean;
  style?: React.CSSProperties;
}

const PlayerAvatar = ({
  name = "",
  size = 35,
  disableFullscreen = false,
  style,
}: PlayerAvatarProps) => {
  const theme = useMantineTheme();

  const getFacehashSize = (size: number): 32 | 48 | 64 | 80 => {
    if (size <= 40) return 32;
    if (size <= 56) return 48;
    if (size <= 72) return 64;
    return 80;
  };

  const facehashSize = getFacehashSize(size);

  const colors = [
    "hsla(314, 100%, 80%, 1)",
    "hsla(58, 93%, 72%, 1)",
    "hsla(218, 92%, 72%, 1)",
    "hsla(19, 99%, 44%, 1)",
    "hsla(156, 86%, 40%, 1)",
    "hsla(314, 100%, 85%, 1)",
    "hsla(58, 92%, 79%, 1)",
    "hsla(218, 91%, 78%, 1)",
    "hsla(19, 99%, 50%, 1)",
    "hsla(156, 86%, 64%, 1)",
  ];

  return (
    <Paper
      p={size / 20}
      radius="100%"
      withBorder
      style={{
        cursor: !disableFullscreen ? 'pointer' : 'default',
        transition: 'transform 0.15s ease',
        ...style,
      }}
      onMouseEnter={(e) => {
        if (!disableFullscreen) {
          e.currentTarget.style.transform = 'scale(1.02)';
        }
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'scale(1)';
      }}
    >
      <div
        style={{
          width: size,
          height: size,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          overflow: 'hidden',
          borderRadius: '100%',
        }}
      >
        <Facehash
          name={name}
          size={size}
          variant="solid"
          colors={colors}
					intensity3d="dramatic"
          enableBlink
          style={{ borderRadius: '100%', overflow: 'hidden', color: 'black' }}
        />
      </div>
    </Paper>
  );
};

export default PlayerAvatar;