import { jsxs, jsx } from 'react/jsx-runtime';
import React from 'react';
import styles from './PixelEditor.module.css.js';
import { NiceButton as We, NiceNumberInput as ir, NiceCheckbox as Fr } from '../packages/ui/dist/index.js';

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

export { PixelEditorTimeline as default };
//# sourceMappingURL=PixelEditorTimeline.js.map
