Fonts

import { useState } from 'react';
import { Lookup, Select, Slider, RangeSlider, Card } from '@cleen/cleen-components';
import { useFonts } from '@/hooks/useFonts';

export function FontPicker() {
  const { fonts } = useFonts();
  const [size, setSize]       = useState(16);
  const [weight, setWeight]   = useState(400);
  const [selected, setSelected] = useState(null);

  return (
    <div className="font-picker">
      <Lookup
        items={fonts}
        searchKeys={['family', 'designer']}
        onSelect={setSelected}
        renderItem={(f) => <span style={{ fontFamily: f.family }}>{f.family}</span>}
      />
      <Slider label="Size"   min={10} max={72} value={size}   onChange={setSize} />
      <Slider label="Weight" min={100} max={900} step={100} value={weight} onChange={setWeight} />
      {selected && (
        <Card style={{ fontFamily: selected.family, fontSize: size, fontWeight: weight }}>
          The quick brown fox jumps over the lazy dog.
        </Card>
      )}
    </div>
  );
}