import type * as React from "react";
import { BrandIcon } from "@reactive-resume/ui/components/brand-icon";

// The component builds its src from /logo|/icon static paths that the preview
// server does not serve, so we override `src` with the real inlined SVG assets.
const LOGO_SRC =
	"data:image/svg+xml;base64,[encoded data, 10212 characters]";
const ICON_SRC =
	"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cjx0aXRsZT5SZWFjdGl2ZSBSZXN1bWU8L3RpdGxlPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3My42MTEgMTY2LjMxMUwxMzIuODc3IDIxOS44MDRIMTczLjUyNEwxOTMuOTczIDE5MS44MTNMMjEzLjE4MyAyMTkuODA0SDI1NkwyMTUuNjczIDE2NS43MDdMMjE1LjE1IDE2NS4wNDZMMjA3LjQ2MSAxNTUuMzMyTDE5NS4zMjkgMTQwLjAwNEwxOTUuMjU4IDEzOS45MTVMMTkzLjgxMyAxMzguMDg5TDE5My45MjMgMTM4LjAwMUwxNzYuMjg2IDExMi44NjFIMTM0LjA2MUwxNzMuNjExIDE2Ni4zMTFaTTE5OS44OSAxMzMuNTU0TDIxNC45NTkgMTEyLjg2MUgyNTQuNjE5TDIxOS44NzQgMTU4LjhMMTk5Ljg5IDEzMy41NTRaIiBmaWxsPSIjMDkwOTBCIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAzNi4xOTU5VjE3NC4zMTRIMzkuMDY3OFYxMzcuNjE0SDYwLjM5MzhMNjAuNDMyMyAxMzcuNjcxQzYwLjg0MzYgMTM3LjY1MyA2MS4yNTE4IDEzNy42MzQgNjEuNjU2OSAxMzcuNjE0Qzc1LjA2NjUgMTM2Ljk2OCA4NS4xNDcxIDEzNS41NDkgOTYuMzg0OSAxMzEuMzg1Qzk2Ljc1OTYgMTMxLjI0NiA5Ny4xMzU1IDEzMS4xMDQgOTcuNTEyOCAxMzAuOTU5TDk3LjQ1OTEgMTMwLjg4MUMxMDUuODE2IDEyNi44NiAxMTIuMzMxIDEyMS4zNDQgMTE3LjAwNiAxMTQuMzMxQzEyMi4wMDUgMTA2LjcwMiAxMjQuNTA0IDk3LjY5MTUgMTI0LjUwNCA4Ny4yOTk3QzEyNC41MDQgNzYuNzc2NCAxMjIuMDA1IDY3LjcgMTE3LjAwNiA2MC4wNzA2QzExMi4wMDcgNTIuMzA5NyAxMDQuOTA0IDQ2LjM5MDMgOTUuNjk2NCA0Mi4zMTI1Qzg2LjYyIDM4LjIzNDcgNzUuNzY3OCAzNi4xOTU5IDYzLjEzOTkgMzYuMTk1OUgwWk0xMDIuMTU2IDEzNy43MjVMNjQuODcwNSAxNDQuMTc1TDg1LjQzNjEgMTc0LjMxNEgxMjcuMjY2TDEwMi4xNTYgMTM3LjcyNVpNMzkuMDY3OCAxMDcuNDI2SDYwLjc3MjFDNjguOTI3NyAxMDcuNDI2IDc0Ljk3ODYgMTA1LjY1IDc4LjkyNDggMTAyLjA5OEM4My4wMDI2IDk4LjU0NjUgODUuMDQxNSA5My42MTM3IDg1LjA0MTUgODcuMjk5N0M4NS4wNDE1IDgwLjg1NDIgODMuMDAyNiA3NS44NTU2IDc4LjkyNDggNzIuMzA0Qzc0Ljk3ODYgNjguNzUyMyA2OC45Mjc3IDY2Ljk3NjUgNjAuNzcyMSA2Ni45NzY1SDM5LjA2NzhWMTA3LjQyNloiIGZpbGw9IiMwOTA5MEIiLz4KPC9zdmc+Cg==";

const wrap: React.CSSProperties = { display: "flex", alignItems: "center", gap: 32, padding: 24 };
const cell: React.CSSProperties = { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 };
const label: React.CSSProperties = { fontSize: 12, color: "var(--muted-foreground)" };

export const Logo = () => (
	<div style={wrap}>
		<div style={cell}>
			<BrandIcon variant="logo" src={LOGO_SRC} style={{ width: 160, height: "auto" }} />
			<span style={label}>variant="logo"</span>
		</div>
	</div>
);

export const Icon = () => (
	<div style={wrap}>
		<div style={cell}>
			<BrandIcon variant="icon" src={ICON_SRC} style={{ width: 48, height: 48 }} />
			<span style={label}>variant="icon"</span>
		</div>
		<div style={cell}>
			<BrandIcon variant="icon" src={ICON_SRC} style={{ width: 32, height: 32 }} />
			<span style={label}>compact</span>
		</div>
	</div>
);
