import * as React from 'react';
import { BaseAvatar, BaseAvatarFallback, BaseAvatarImage } from './BaseAvatar';

import { type VariantProps, cva } from 'class-variance-authority';
import { cn } from '../..';
import styles from './Avatar.module.css';

export type AvatarProps = {
  className?: string;
};

const avatarVariants = cva(styles.Avatar);
const avatarFallbackVariants = cva(styles.AvatarFallback);
const avatarImageVariants = cva(styles.AvatarImage);

const Avatar = React.forwardRef<
  React.ElementRef<typeof BaseAvatar>,
  React.ComponentProps<typeof BaseAvatar> & VariantProps<typeof avatarVariants>
>(({ className, ...props }, ref) => {
  return (
    <BaseAvatar
      ref={ref}
      className={cn(styles.Avatar, avatarVariants, className)}
      {...props}
    />
  );
});

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof BaseAvatarFallback>,
  React.ComponentProps<typeof BaseAvatarFallback> &
    VariantProps<typeof avatarFallbackVariants>
>(({ className, ...props }, ref) => {
  return (
    <BaseAvatarFallback
      ref={ref}
      className={cn(styles.AvatarFallback, avatarFallbackVariants, className)}
      {...props}
    />
  );
});

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof BaseAvatarImage>,
  React.ComponentProps<typeof BaseAvatarImage> &
    VariantProps<typeof avatarVariants>
>(({ className, ...props }, ref) => {
  return (
    <BaseAvatarImage
      ref={ref}
      className={cn(styles.AvatarImage, avatarImageVariants, className)}
      {...props}
    />
  );
});

export { Avatar, AvatarFallback, AvatarImage };
