import { useOpenGraph } from "@lume/utils";

function isImage(url: string) {
	return /^https?:\/\/.+\.(jpg|jpeg|png|webp|avif)$/.test(url);
}

export function LinkPreview({ url }: { url: string }) {
	const domain = new URL(url);
	const { isLoading, isError, data } = useOpenGraph(url);

	if (isLoading) {
		return (
			<div className="my-1.5 flex w-full flex-col overflow-hidden rounded-2xl border border-black/10 p-3 dark:border-white/10">
				<div className="h-48 w-full shrink-0 animate-pulse bg-neutral-300 dark:bg-neutral-700" />
				<div className="flex flex-col gap-2 px-3 py-3">
					<div className="h-3 w-2/3 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
					<div className="h-3 w-3/4 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
					<span className="mt-2.5 text-sm leading-none text-neutral-600 dark:text-neutral-400">
						{domain.hostname}
					</span>
				</div>
			</div>
		);
	}

	if (!data.title && !data.image && !data.description) {
		return (
			<a
				href={url}
				target="_blank"
				rel="noreferrer"
				className="inline-block text-blue-500 hover:text-blue-600"
			>
				{url}
			</a>
		);
	}

	if (isError) {
		return (
			<a
				href={url}
				target="_blank"
				rel="noreferrer"
				className="inline-block text-blue-500 hover:text-blue-600"
			>
				{url}
			</a>
		);
	}

	return (
		<a
			href={url}
			target="_blank"
			rel="noreferrer"
			className="my-1 flex w-full flex-col overflow-hidden rounded-2xl border border-black/10 dark:border-white/10"
		>
			{isImage(data.image) ? (
				<img
					src={data.image}
					alt={url}
					loading="lazy"
					decoding="async"
					className="h-48 w-full shrink-0 rounded-t-lg bg-white object-cover"
				/>
			) : null}
			<div className="flex flex-col items-start p-3">
				<div className="flex flex-col items-start text-left">
					{data.title ? (
						<div className="content-break line-clamp-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
							{data.title}
						</div>
					) : null}
					{data.description ? (
						<div className="content-break mb-2 line-clamp-3 text-balance text-sm text-neutral-700 dark:text-neutral-400">
							{data.description}
						</div>
					) : null}
				</div>
				<div className="break-all text-sm font-semibold text-blue-500">
					{domain.hostname}
				</div>
			</div>
		</a>
	);
}