import type { Props as ImageProps } from "corvos/plugins/images.ts";
import type { HTMLAttributes } from "corvos/plugins/jsx.ts";

import { Image } from "corvos/plugins/images.ts";

export type Props = HTMLAttributes<"a"> &
	ImageProps & {
		"x-bind:src"?: string;
		"x-bind:srcset"?: string;
		"x-bind:alt"?: string;
		"variant"?: "static-black" | "static-white";
	};

export const Thumbnail = ({
	src,
	srcset,
	alt,
	"x-bind:src": xbindSrc,
	"x-bind:srcset": xbindSrcset,
	"x-bind:alt": xbindAlt,
	variant,
	class: cls,
	widths,
	width,
	height,
	densities,
	"no-transform": noTransform,
	...props
}: Props) => (
	<a class:list={["o-thumbnail", { [`o-thumbnail--${variant}`]: variant }, cls]} {...props}>
		<Image
			class="o-thumbnail__image"
			src={src}
			srcset={srcset}
			widths={widths as undefined}
			width={width}
			height={height}
			densities={densities}
			no-transform={noTransform}
			alt={alt}
			x-bind:src={xbindSrc}
			x-bind:srcset={xbindSrcset}
			x-bind:alt={xbindAlt}
		/>
	</a>
);