'use client';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import { User } from 'lucide-react';
import { cn } from '@/lib/utils';
import { AvatarImage } from '@/components/ui/avatar';
import { type ComponentProps } from 'react';

type BasedAvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {
  src?: string | null;
  fullName?: string | null;
  imageProps?: Omit<ComponentProps<typeof AvatarImage>, 'data-slot'>;
  fallbackProps?: ComponentProps<typeof AvatarPrimitive.Fallback>;
  userIconProps?: ComponentProps<typeof User>;
};

const BasedAvatar = ({
  src = null,
  fullName = null,
  imageProps,
  fallbackProps,
  userIconProps = {
    size: 32,
  },
  className,
  ...props
}: BasedAvatarProps) => {
  return (
    <AvatarPrimitive.Root
      data-slot='avatar'
      className={cn(
        'cursor-pointer relative flex size-8 shrink-0 overflow-hidden rounded-full',
        className,
      )}
      {...props}
    >
      {src ? (
        <AvatarImage {...imageProps} src={src} className={imageProps?.className} />
      ) : (
        <AvatarPrimitive.Fallback
          {...fallbackProps}
          data-slot='avatar-fallback'
          className={cn(
            'bg-muted flex size-full items-center justify-center rounded-full',
            fallbackProps?.className,
          )}
        >
          {fullName ? (
            fullName
              .split(' ')
              .map((n) => n[0])
              .join('')
              .toUpperCase()
          ) : (
            <User {...userIconProps} className={cn('', userIconProps?.className)} />
          )}
        </AvatarPrimitive.Fallback>
      )}
    </AvatarPrimitive.Root>
  );
};

export { BasedAvatar };