import { cn } from "@/lib/utils";
import {
  Book,
  ClipboardList,
  SearchCheck,
  CircleX,
  Rabbit,
} from "lucide-react";
import Image from "next/image";
import React from "react";

const icons = {
  book: Book,
  clipBoardList: ClipboardList,
  searchCheck: SearchCheck,
  error: "/error.png",
  notFoundCat: "/notFoundCat.png",
};

interface EmptyIconProps {
  iconName: keyof typeof icons;
  size?: number;
  width?:number,
  height?:number,
  className?: string; // Asegura que solo los nombres de iconos válidos sean permitidos
}

interface EmplyPlaceHolderProps {
  children: React.ReactNode;
  className?: string; // ReactNode es el tipo correcto para cualquier contenido renderizable en React
}

interface EmptyTitle {
  children: string;
  className?: string; // ReactNode es el tipo correcto para cualquier contenido renderizable en React
}

export const EmplyPlaceHolder = ({
  children,
  className,
}: EmplyPlaceHolderProps) => {
  return (
    <div
      className={cn(
        "flex flex-col gap-1 justify-center items-center ",
        className
      )}
    >
      {children}
    </div>
  );
};

export const EmptyIcon = ({
  iconName,
  width = 150,
  height=150,
  className,
}: EmptyIconProps) => {
  const IconImage = icons[iconName];

  if (!IconImage) return;

  return (
    <Image
      width={width}
      height={height}
      src={IconImage as string}
      alt="not found icon"
      className="m-auto"
    ></Image>
  );
};

interface EmptyTitleProps {
  children: React.ReactNode;
  className?: string;
}

export const EmptyTitle = ({ children, className }: EmptyTitleProps) => {
  return <h2 className={cn("text-xl font-semibold", className)}>{children}</h2>;
};

export const EmptyContent = ({ children, className }: EmptyTitleProps) => {
  return <h2 className={cn("text-sm font-medium", className)}>{children}</h2>;
};