import { Inset } from "@radix-ui/themes";
import { useMemo } from "react";

type TInsetImageProps = {
	isHovered: boolean;
	ref_: React.RefObject<HTMLDivElement>;
	windowWidth: number;
};

export default function InsetImage(props: TInsetImageProps) {
	const seed = useMemo(() => {
		return Math.floor(Math.random() * (1 + Math.random()) * 100000);
	}, []);

	return (
		<Inset
			side={"left"}
			clip={"padding-box"}
			className={`max-w-[${
				props.isHovered ? "100%" : "225px"
			}] transition-[flex] duration-[250ms] 
				${props.isHovered ? "flex-1" : "flex-[0.5]"}
				relative overflow-hidden h-72`}
		>
			<img
				style={{
					minWidth: `${
						Math.min(
							props.windowWidth,
							props.ref_.current?.clientWidth || 0
						) / 2
					}px`,
					transform: `${
						props.isHovered
							? "translateX(0)"
							: `translateX(calc(-50% + ${
									Math.min(
										props.windowWidth,
										props.ref_.current?.clientWidth || 0
									) / 6
							  }px))`
					}`,
				}}
				className={`h-72 transition-all duration-[250ms]`}
				src={`https://picsum.photos/seed/${seed}/1000/600?grayscale`}
				alt="Bold typography"
			/>
		</Inset>
	);
}