import { Avatar } from "flowbite-react";
import { FC } from "react";

type Props = {
  images?: string[];
};

const PreviewImages: FC<Props> = ({ images }) => {
  const removeImage = (imageId: string) => {
    return "";
  };
  return (
    <>
      <div className="ml-2 mt-3 flex flex-wrap gap-2">
        {images?.map((image: any, index: number) => (
          <Avatar
            img={`${process.env.NEXT_PUBLIC_API}/${image.image_path}`}
            size="lg"
            className="relative"
            key={index}
          >
            <button
              aria-label="Close"
              onClick={() => removeImage(image.id)}
              className="absolute -top-0  right-4 bg-gray-100 text-sm text-gray-900 hover:bg-gray-200 hover:text-red-400 dark:hover:bg-gray-600 dark:hover:text-white"
              type="button"
            >
              <svg
                stroke="currentColor"
                fill="none"
                strokeWidth="2"
                viewBox="0 0 24 24"
                aria-hidden="true"
                className="h-5 w-5"
                height="1em"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                ></path>
              </svg>
            </button>
          </Avatar>
        ))}
      </div>
    </>
  );
};

export default PreviewImages;