import React, {ReactNode} from 'react';
import {Avatar, AvatarProps} from '../../ui/images/avatar';
import {Skeleton} from '@common/ui/skeleton/skeleton';
import clsx from 'clsx';

interface Props {
  image?: string;
  label: ReactNode;
  description?: ReactNode;
  labelClassName?: string;
  avatarSize?: AvatarProps['size'];
}
export function NameWithAvatar({
  image,
  label,
  description,
  labelClassName,
  avatarSize = 'md',
}: Props) {
  return (
    <div className="flex items-center gap-12">
      {image && (
        <Avatar size={avatarSize} className="flex-shrink-0" src={image} />
      )}
      <div className="min-w-0 overflow-hidden">
        <div
          className={clsx(labelClassName, 'overflow-hidden overflow-ellipsis')}
        >
          {label}
        </div>
        {description && (
          <div className="overflow-hidden overflow-ellipsis text-xs text-muted">
            {description}
          </div>
        )}
      </div>
    </div>
  );
}

export function NameWithAvatarPlaceholder({
  labelClassName,
  showDescription,
}: Partial<Props> & {
  showDescription?: boolean;
}) {
  return (
    <div className="flex w-full max-w-4/5 items-center gap-12">
      <Skeleton size="w-40 h-40 md:w-32 md:h-32" variant="rect" />
      <div className="flex-auto">
        <div className={clsx(labelClassName, 'leading-3')}>
          <Skeleton />
        </div>
        {showDescription && (
          <div className="mt-4 leading-3 text-muted">{<Skeleton />}</div>
        )}
      </div>
    </div>
  );
}