import React from "react";
import { Box } from "@chakra-ui/react";
interface MoriAvatarProps {
  variant?: "default" | "small" | "large" | "smaller";
  size?: string;
}

const MoriAvatar: React.FC<MoriAvatarProps> = ({
  variant = "default",
  size: propSize,
  ...props
}) => {
  const getSize = () => {
    if (propSize) return propSize;

    switch (variant) {
      case "smaller":
        return "xs";
      case "small":
        return "sm";
      case "large":
        return "lg";
      default:
        return "md";
    }
  };

  return (
    <Box position="relative">
      <Box
        width={
          getSize() === "sm"
            ? "32px"
            : getSize() === "lg"
              ? "64px"
              : getSize() === "xs"
                ? "24px"
                : "48px"
        }
        height={
          getSize() === "sm"
            ? "32px"
            : getSize() === "lg"
              ? "64px"
              : getSize() === "xs"
                ? "24px"
                : "48px"
        }
        bg="linear-gradient(135deg, #FF7E90 0%, #FF6B9D 100%)"
        borderRadius="full"
        display="flex"
        alignItems="center"
        justifyContent="center"
        {...props}
      >
        <Box
          position="absolute"
          top="50%"
          left="50%"
          transform="translate(-50%, -50%)"
          w="60%"
          h="60%"
          bg="white"
          borderRadius="full"
          display="flex"
          alignItems="center"
          justifyContent="center"
        >
          <Box
            w="40%"
            h="40%"
            bg="transparent"
            border="2px solid"
            borderColor="pink.400"
            borderRadius="full"
            position="relative"
          >
            <Box
              position="absolute"
              top="30%"
              left="25%"
              w="2px"
              h="2px"
              bg="pink.400"
              borderRadius="full"
            />
            <Box
              position="absolute"
              top="30%"
              right="25%"
              w="2px"
              h="2px"
              bg="pink.400"
              borderRadius="full"
            />
            <Box
              position="absolute"
              bottom="25%"
              left="50%"
              transform="translateX(-50%)"
              w="6px"
              h="2px"
              bg="pink.400"
              borderRadius="full"
            />
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default MoriAvatar;