'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function MediaField({ label, value, onChange, required, helpText }) {
    return (_jsxs("div", { children: [_jsxs("label", { className: "mb-1 block text-sm font-medium", children: [label, required && _jsx("span", { className: "ml-0.5 text-[var(--destructive)]", children: "*" })] }), value ? (_jsxs("div", { className: "flex items-center gap-3 rounded-md border border-[var(--border)] p-3", children: [_jsx("div", { className: "h-16 w-16 shrink-0 rounded-md bg-[var(--muted)]" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium", children: value.filename }), _jsx("button", { type: "button", onClick: () => onChange(null), className: "mt-1 text-xs text-[var(--destructive)] hover:underline", children: "Remove" })] })] })) : (_jsx("button", { type: "button", onClick: () => onChange({ id: 'mock', filename: 'placeholder.jpg', url: '' }), className: "flex w-full items-center justify-center rounded-md border-2 border-dashed border-[var(--border)] p-6 text-sm text-[var(--muted-foreground)] hover:border-[var(--primary)] hover:text-[var(--foreground)]", children: _jsx("span", { children: "Click to select media" }) })), helpText && _jsx("p", { className: "mt-1 text-xs text-[var(--muted-foreground)]", children: helpText })] }));
}
//# sourceMappingURL=MediaField.js.map