import * as React from 'react';
import { UserHoverPreview } from './UserHoverPreview';
import {
  anchorClassNamesForVisualStyle,
  iconClassNamesForSize,
} from '../utils/hoverPreviewUtils';

type VisualStyle = 'sky-link' | 'description-section-link';
type IconSize = 'small' | 'large';

interface UserHoverPreviewWrapperProps {
  visualStyle: VisualStyle;
  iconSize: IconSize;
  linkText: string;
  userId: string;
  userName: string;
  userPath: string;
  userAvatarPath: string;
  userAvatarAlt: string;
  userDomainIcon?: string;
  userSmallAvatarPath?: string;
  userRegisteredAt?: string;
  userNumPosts?: number;
  userNumFollowedBy?: number;
  userNumFollowed?: number;
}

export const UserHoverPreviewWrapper: React.FC<
  UserHoverPreviewWrapperProps
> = ({
  visualStyle,
  iconSize,
  linkText,
  userName,
  userPath,
  userAvatarPath,
  userAvatarAlt,
  userDomainIcon,
  userSmallAvatarPath,
  userRegisteredAt,
  userNumPosts,
  userNumFollowedBy,
  userNumFollowed,
}) => {
  return (
    <UserHoverPreview
      userName={userName}
      userAvatarPath={userAvatarPath}
      userAvatarAlt={userAvatarAlt}
      userDomainIcon={userDomainIcon}
      userRegisteredAt={userRegisteredAt}
      userNumPosts={userNumPosts}
      userNumFollowedBy={userNumFollowedBy}
      userNumFollowed={userNumFollowed}
    >
      <a
        href={userPath}
        className={anchorClassNamesForVisualStyle(
          visualStyle,
          !!userSmallAvatarPath,
        )}
      >
        {userSmallAvatarPath ? (
          <img
            src={userSmallAvatarPath}
            alt={userAvatarAlt}
            className={iconClassNamesForSize(iconSize)}
          />
        ) : (
          <i className={iconClassNamesForSize(iconSize)}></i>
        )}
        {linkText}
      </a>
    </UserHoverPreview>
  );
};

export default UserHoverPreviewWrapper;
