import React from "react";
import NoImageIcon from "../assets/no-image-svgrepo-com.svg";

interface NoImagePlaceholderProps {
  size?: "sm" | "md" | "lg";
  className?: string;
}

/**
 * NoImagePlaceholder Component
 * Componente reutilizável para exibir placeholder quando não há imagem disponível
 *
 * @param size - Tamanho do placeholder (sm, md, lg)
 * @param className - Classes CSS adicionais
 */
const NoImagePlaceholder: React.FC<NoImagePlaceholderProps> = ({
  size = "md",
  className = "",
}) => {
  const sizeClasses = {
    sm: "w-16 h-14 p-4",
    md: "w-24 h-20 p-4",
    lg: "w-32 h-28 p-4",
  };

  const textSizeClasses = {
    sm: "text-xs",
    md: "text-sm",
    lg: "text-base",
  };

  return (
    <div
      className={`flex flex-col items-center justify-center text-slate-400 ${className}`}
    >
      <div
        className={`${sizeClasses[size]} flex items-center justify-center mb-2 p-2`}
      >
        <img
          src={NoImageIcon}
          alt="Sem imagem"
          className={`${sizeClasses[size]} object-contain`}
        />
      </div>
      <span className={`font-medium text-slate-400 ${textSizeClasses[size]}`}>
        Sem imagem
      </span>
    </div>
  );
};

export default NoImagePlaceholder;