'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var PixelEditor_module = require('./PixelEditor.module.css.js');
var index = require('../packages/ui/dist/index.js');

const PixelEditorTimeline = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.bottomPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.timelineControls, children: [jsxRuntime.jsx(index.NiceButton, { variant: "ghost", size: "sm", onClick: api.addFrame, children: "+ Frame" }), jsxRuntime.jsx(index.NiceButton, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": "Duplicate frame", children: "Dup" }), jsxRuntime.jsx(index.NiceButton, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": "Remove frame", children: "\u2212 Frame" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(index.NiceButton, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), children: api.playing ? "⏸" : "▶" }), jsxRuntime.jsx("label", { children: "FPS:" }), jsxRuntime.jsx(index.NiceNumberInput, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": "Frames per second" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(index.NiceCheckbox, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: "Onion" }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { children: [api.fc, " frame", api.fc !== 1 ? "s" : ""] })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxRuntime.jsxs("div", { className: `${PixelEditor_module.frameThumb} ${fi === api.afi ? PixelEditor_module.frameThumbActive : ""}`, onClick: () => api.setAfi(fi), children: [api.thumbs[fi] && (jsxRuntime.jsx("img", { src: api.thumbs[fi], alt: `Frame ${fi + 1}`, style: { width: 36, height: 36, imageRendering: "pixelated", objectFit: "contain" } })), jsxRuntime.jsx("span", { className: PixelEditor_module.frameNum, children: fi + 1 })] }, fi))) })] })));
PixelEditorTimeline.displayName = "PixelEditorTimeline";

module.exports = PixelEditorTimeline;
//# sourceMappingURL=PixelEditorTimeline.js.map
