import { useState } from 'react';
import { Select, Slider, ToggleGroup } from '@gj-kit/expo-ui';
const densityItems = [
{ label: '여유', value: 'spacious' },
{ label: '기본', value: 'comfortable' },
{ label: '압축', value: 'compact' },
] as const;
const channelItems = [
{ label: 'Stable', value: 'stable' },
{ label: 'Preview', value: 'preview' },
] as const;
export function ReadingControls() {
const [fontSize, setFontSize] = useState(16);
const [density, setDensity] = useState<'spacious' | 'comfortable' | 'compact'>('comfortable');
const [channel, setChannel] = useState<'stable' | 'preview' | null>('stable');
const [selectOpen, setSelectOpen] = useState(false);
return (
<>
<Slider
value={fontSize}
min={12}
max={24}
step={1}
accessibilityLabel="본문 글자 크기"
onValueChange={setFontSize}
/>
<ToggleGroup
selectionMode="single"
value={density}
onValueChange={(next) => next && setDensity(next)}
accessibilityLabel="목록 밀도"
items={densityItems}
allowEmpty={false}
/>
<Select
label="릴리스 채널"
placeholder="채널 선택"
items={channelItems}
value={channel}
onValueChange={setChannel}
open={selectOpen}
onOpenChange={(next) => setSelectOpen(next)}
/>
</>
);
}