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

interface PostHoverPreviewWrapperProps {
  visualStyle: 'sky-link' | 'description-section-link';
  linkText: string;
  postTitle: string;
  postPath: string;
  postThumbnailPath: string;
  postThumbnailAlt: string;
  postDomainIcon?: string;
  creatorName?: string;
  creatorAvatarPath?: string;
}

export const PostHoverPreviewWrapper: React.FC<
  PostHoverPreviewWrapperProps
> = ({
  visualStyle,
  linkText,
  postTitle,
  postPath,
  postThumbnailPath,
  postThumbnailAlt,
  postDomainIcon,
  creatorName,
  creatorAvatarPath,
}) => {
  return (
    <PostHoverPreview
      postTitle={postTitle}
      postThumbnailPath={postThumbnailPath}
      postThumbnailAlt={postThumbnailAlt}
      postDomainIcon={postDomainIcon}
      creatorName={creatorName}
      creatorAvatarPath={creatorAvatarPath}
    >
      <a
        href={postPath}
        className={anchorClassNamesForVisualStyle(visualStyle, true)}
      >
        {postDomainIcon && (
          <img
            src={postDomainIcon}
            alt={postThumbnailAlt}
            className={iconClassNamesForSize('small')}
          />
        )}
        {visualStyle === 'description-section-link' && (
          <img
            src={postDomainIcon}
            alt={postTitle}
            className={iconClassNamesForSize('small')}
          />
        )}
        <span className="truncate">{linkText}</span>
      </a>
    </PostHoverPreview>
  );
};

export default PostHoverPreviewWrapper;