import { ContentCardProps } from "@app/models/components";
import React, { useEffect, useState } from "react";
import Button from "../button/Button";
import "./content-card-styles.scss";
import InfoBadge from "../InfoBadge/InfoBadge";

const ContentCard: React.FC<ContentCardProps> = ({
  title,
  description,
  meta,
  imageSrc,
  imageAlign,
  tags,
  actionButtons,
  maxWidth,
  overlayContent,
  hoverEffect = true,
  onHoverContent,
  stickContent = false,
}) => {
  const [isHovering, setIsHovering] = useState(false);

  useEffect(() => {
    if (stickContent) {
      setIsHovering(true);
    } else {
      setIsHovering(false);
    }
  }, [stickContent]);

  const contentClass = isHovering ? "contentCard-content--expanded" : "";
  const hasContent = title || description || meta || !!actionButtons?.length;

  const handleMouseEnter = () => {
    if (!hoverEffect) return;
    setIsHovering(true);
  };

  const handleMouseLeave = () => {
    if (!hoverEffect || stickContent) return;
    setIsHovering(false);
  };

  return (
    <>
      {imageSrc && (
        <div
          className="contentCard-outerWrapper"
          style={maxWidth ? { maxWidth } : {}}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          {overlayContent && (
            <div className="contentCard-outerWrapper--overlay">
              {overlayContent}
            </div>
          )}
          <div className="contentCard-innerWrapper">
            <div className="contentCard-imageContainer">
              {isHovering && <div className="contentCard-imageOverlay"></div>}
              <img
                style={{ objectPosition: `${imageAlign ?? "left top"}` }}
                className="contentCard-image"
                src={imageSrc}
              />
            </div>
            {hasContent && (
              <div className={`contentCard-content ${contentClass}`}>
                {onHoverContent ?? (
                  <>
                    {title && <h3 className="contentCard-title">{title}</h3>}
                    {description && (
                      <p className="contentCard-description">{description}</p>
                    )}
                    {meta && <p className="contentCard-meta">{meta}</p>}
                  </>
                )}

                {!!actionButtons?.length && (
                  <div className="contentCard-buttons">
                    {actionButtons.map((buttonProps, index) => (
                      <Button key={index} {...buttonProps} />
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
          {tags &&
            tags.map(
              (badge, index) =>
                badge &&
                (badge.icon || badge.text) && (
                  <div key={index} className="contentCard-InfoBadge">
                    <InfoBadge {...badge} />
                  </div>
                )
            )}
        </div>
      )}
    </>
  );
};

export default ContentCard;