import { useState } from 'react'
import {
  measureTextWidth,
  Text,
  TEXT_VARIANT_STYLES,
  TextVariant,
} from './index.js'
import { SwitchInput } from '../SwitchInput/index.js'

export const Default = () => {
  const [debug, setDebug] = useState(false)

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <SwitchInput
        value={debug}
        onChange={setDebug}
        description="Overlay canvas calculated text width"
      />
      {Object.keys(TEXT_VARIANT_STYLES).map((variant) => (
        <div
          key={variant}
          style={{
            position: 'relative',
          }}
        >
          {debug && (
            <div
              style={{
                position: 'absolute',
                background: 'red',
                width: measureTextWidth(
                  'The quick brown fox jumps over the dog.',
                  variant as TextVariant,
                ),
                height: '100%',
              }}
            />
          )}
          <Text variant={variant as TextVariant}>
            The quick brown fox jumps over the dog.
          </Text>
        </div>
      ))}
    </div>
  )
}
