import { forwardRef } from 'react';
import { cva, VariantProps } from 'class-variance-authority';

import { getInitials } from './get-initials';
import './avatar.css';

const avatarClassName = cva(['c-avatar'], {
  variants: {
    size: {
      md: 'c-avatar-md',
      lg: 'c-avatar-lg',
      xl: 'c-avatar-xl',
      '2xl': 'c-avatar-2xl',
    },
  },
  defaultVariants: {
    size: 'md',
  },
});

type AvatarProps = React.ComponentPropsWithRef<'div'> &
  VariantProps<typeof avatarClassName> & {
    name: string;
  };

export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({ name, size, className, ...delegated }, ref) => {
  return (
    <div ref={ref} {...delegated} title={name} className={avatarClassName({ size, className })}>
      <span className="c-avatar-initials">{getInitials(name)}</span>
    </div>
  );
});

Avatar.displayName = 'Avatar';
