Hover Zoom

// --- Demo/Wrapper Component ---
// Это универсальный демонстрационный компонент. Он не зависит от Framer
// и может быть отрендерен в любом React-приложении (Vite, Storybook и т.д.).

import { jsx as _jsx } from "react/jsx-runtime";
// Предполагается, что чистый компонент лежит в соседнем файле.
// Адаптируйте путь импорта под вашу структуру проекта.
import { ZoomImageUI } from "@/components/ui/hover-zoom";

/**
 * ZoomImageDemo - это "умная" обертка, которая показывает, как
 * использовать ZoomImageUI. Она задает окружение (размеры, центрирование)
 * и передает конкретные props для демонстрации.
 */
export default function ZoomImageDemo() {
    // Враппер для демонстрации. Создаем контейнер, чтобы компонент
    // было удобно просматривать.
    const demoContainerStyles = {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: "100vh", // Занимает весь экран для наглядности
        background: "#f0f0f0",
    };

    // Определяем конкретные props для одного экземпляра компонента.
    // Это заменяет логику addPropertyControls.
    const componentProps = {
        zoomScale: 2,
        borderRadius: 16,
        backgroundColor: "#000",
        image: {
            src: "https://cdn.21st.dev/assets/mirror/1e/1ea14662af5c0bbea4c027c378d0da6515a7d5171f72c65f93072f454ba296f3.jpg",
            alt: "Colorful abstract background",
        },
        // Задаем фиксированные размеры для демонстрационного компонента
        style: {
            width: "300px",
            height: "300px",
            boxShadow: "0 10px 30px rgba(0,0,0,0.2)",
        }
    };

    return (
        <div style={demoContainerStyles}>
            <ZoomImageUI {...componentProps} />
        </div>
    );
}