'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback, useRef } from 'react';
import { Crosshair } from 'lucide-react';
export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }) {
    const containerRef = useRef(null);
    const [dragging, setDragging] = useState(false);
    const handlePosition = useCallback((e) => {
        const rect = containerRef.current?.getBoundingClientRect();
        if (!rect)
            return;
        const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
        const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
        onChange(Math.round(x * 100) / 100, Math.round(y * 100) / 100);
    }, [onChange]);
    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-[var(--foreground)]", children: [_jsx(Crosshair, { className: "h-4 w-4" }), "Focal Point"] }), _jsxs("div", { ref: containerRef, className: "relative cursor-crosshair overflow-hidden rounded-lg border border-[var(--border)] select-none", style: { maxHeight: '200px' }, onClick: handlePosition, onMouseDown: () => setDragging(true), onMouseUp: () => setDragging(false), onMouseLeave: () => setDragging(false), onMouseMove: (e) => {
                    if (dragging)
                        handlePosition(e);
                }, children: [_jsx("img", { src: imageUrl, alt: "Focal point preview", className: "h-full w-full object-contain", draggable: false }), _jsx("div", { className: "pointer-events-none absolute -mt-3 -ml-3 h-6 w-6 rounded-full border-2 border-white bg-blue-500/50 shadow-lg", style: { left: `${focalX * 100}%`, top: `${focalY * 100}%` }, children: _jsx("div", { className: "absolute inset-1 rounded-full bg-white" }) })] }), _jsxs("p", { className: "text-xs text-[var(--muted-foreground)]", children: ["Click or drag to set the focal point (", Math.round(focalX * 100), "%,", ' ', Math.round(focalY * 100), "%)"] })] }));
}
//# sourceMappingURL=FocalPointPicker.js.map