import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { styled } from "../../theme";
import { pxToRem } from "../../utils";

export const avatarVariants = {
  small: {
    width: pxToRem(20),
    height: pxToRem(20),
  },
  large: {
    width: "$6",
    height: "$6",
  },
};

export const StyledAvatar = styled(AvatarPrimitive.Root, {
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  verticalAlign: "middle",
  overflow: "hidden",
  userSelect: "none",
  width: "$4",
  height: "$4",
  borderRadius: "9999px",
  backgroundColor: "$off-white-9",

  variants: {
    variant: avatarVariants,
  },

  defaultVariants: {
    variant: "large",
  },
});

export const AvatarImage = styled(AvatarPrimitive.Image, {
  width: "100%",
  height: "100%",
  objectFit: "cover",
  borderRadius: "inherit",
});

export const AvatarFallback = styled(AvatarPrimitive.Fallback, {
  width: "100%",
  height: "100%",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  backgroundColor: "$off-white-9",
  color: "$light-chromia-dark",
  fontSize: "$2",
  lineHeight: 1,
  fontWeight: "$medium",
  fontFamily: "$text",
});