import { cn } from "@/lib/utils";
import { fonts, ImageShapeName, imageShapes } from "@/front/lib/constants";
import { ImageProps } from "@/types/front";
import Button from "./Button";

type ImageAction = {
  label: string;
  href: string;
};

type ThemeImageProps = {
  shape?: ImageShapeName;
  image: ImageProps;
  size?: string;
  action?: ImageAction;
};

export default function Image({
  shape = imageShapes.ROUNDED,
  image,
  action,
  size = "w-32 h-32",
}: Readonly<ThemeImageProps>) {
  const customShape =
    shape === imageShapes.SQUARE ? "rounded-none" : "rounded-full";
  const objectFit = "object-cover";
  const lazyload = image.lazyload ? "lazy" : "eager";
  return (
    <div
      className={cn(
        size,
        customShape,
        "relative z-1 overflow-hidden group flex justify-center items-center",
      )}
    >
      <img
        loading={lazyload}
        className={cn(customShape, objectFit, size)}
        src={image.src}
        alt={image.alt}
        title={image?.title ?? image.alt}
        srcSet={image.src}
      />
      {action && (
        <>
          <div
            className={cn(
              "absolute inset-0 bg-black opacity-0 transition-opacity duration-300",
              "group-hover:opacity-20",
            )}
          />
          <div
            className={cn(
              "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300",
              "group-hover:opacity-100",
            )}
          >
            <Button
              size="xs"
              font={fonts.DELIUS_SWASH}
              isBold={false}
              tabIndex={-1}
              link={{
                label: action.label,
                href: action.href,
              }}
            />
          </div>
        </>
      )}
    </div>
  );
}