import { useState } from 'react'
import {
  DimensionInput,
  Dimension,
  stringifyUnit,
  CSSUnitValue,
} from '@compai/css-gui'

export const DimensionExample = () => {
  const [value, setValue] = useState<Dimension>({
    value: 16,
    unit: 'px',
  })
  return (
    <>
      <DimensionInput
        property="fontSize"
        value={value}
        onChange={setValue}
        units={['px', 'em', 'rem']}
      />
      <h1
        style={{
          fontSize: stringifyUnit('fontSize', value),
        }}
      >
        Aa
      </h1>
    </>
  )
}