import { Button } from "../../atoms/Button";
import { CameraPlusIcon } from "../../../icons";
import { Avatar } from "../../atoms";
import { twMerge } from "tailwind-merge";

interface ProfilePictureProps {
  profileImage: string;
  imageAlt?: string;
  showIcon: boolean;
  name: string,
  onPressIcon?: () => void;
}
const ProfilePicture = ({
  profileImage,
  showIcon,
  imageAlt,
  name,
  onPressIcon,
}: ProfilePictureProps) => {
  return (
    <div className="relative flex w-40 h-40">
        <Avatar
          image={profileImage}
          size="xl"
          name={name}
          imageAlt={imageAlt}
          className={twMerge(`border-4 border-white shadow-[0px_4px_6px_-2px_rgba(16,24,40,0.03),0px_12px_16px_-4px_rgba(16,24,40,0.08)]`)}
        />
        {showIcon && (
          <Button
            size="icon-sm"
            onClick={onPressIcon}
            variant="gray-outline"
            className="rounded-full shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] absolute bottom-2 right-2"
          >
            <CameraPlusIcon className="text-mono-700" />
          </Button>
        )}</div>
  );
};

export { ProfilePicture, ProfilePictureProps };
