import Image from "next/image";
import ClydeAffraid from "assets/images/clyde/affraid.svg";

export const Empty = ({
  title,
  description,
  button,
  className,
  action,
}: {
  title?: string;
  description?: string;
  button?: any;
  className?: string;
  action?: () => void;
}) => {
  return (
    <div className={`mx-auto text-center ${className}`}>
      {/* <Image
        src={ClydeAffraid}
        width={32}
        height={32}
        className="w-full max-w-[100px] mx-auto mt-6"
        alt="No results, clyde is sad :("
      /> */}
      {title && (
        <p className="font-bold text-white text-base mt-4 tracking-wider">
          {title}
        </p>
      )}
      {title && (
        <p className="text-dark-100 font-medium tracking-wider text-sm">
          {description}
        </p>
      )}
      {button && (
        <div
          className="mt-5 w-full bg-blue text-white font-semibold px-3 py-2.5 rounded-lg cursor-pointer hover:bg-blue text-sm"
          onClick={action ? action : () => null}
        >
          {button}
        </div>
      )}
    </div>
  );
};