Token-aware colors and fonts

// @framerSupportedLayoutWidth any-prefer-fixed
// @framerSupportedLayoutHeight fixed

import * as React from 'react'
import { addPropertyControls, ControlType } from 'framer'

// Keep types minimal for CMS safety
type Fontish = any

// Safely unwrap tokens like { value: '#000' }
const parseToken = (v: any) => (v && typeof v === 'object' && 'value' in v ? v.value : v)

// Normalize extended font control into CSS
const applyFont = (font?: Fontish): React.CSSProperties => {
  if (!font) return {}
  const lh = typeof font.lineHeight === 'number' ? String(font.lineHeight) + 'px' : font.lineHeight
  return {
    // spread first so we can override safely below
    ...font,
    fontSize: font.fontSize != null ? font.fontSize : font.size,
    lineHeight: lh,
    fontVariantNumeric: 'tabular-nums',
  }
}

type Props = {
  label?: string
  bg?: any
  color?: any
  shadow?: any
  font?: Fontish
}

export default function Button({ label = 'Click me', bg, color, shadow, font }: Props) {
  const fontStyle = applyFont(font)

  return (
    <button style="{{" background:="" parsetoken(bg)="" ||="" '#007aff',="" color:="" parsetoken(color)="" '#ffffff',="" boxshadow:="" parsetoken(shadow)="" '0="" 4px="" 12px="" rgba(0,0,0,0.1)',="" border:="" 'none',="" borderradius:="" 8,="" padding:="" '12px="" 20px',="" cursor:="" 'pointer',="" ...fontstyle,="" }}="">
      {label}
    </button>
  )
}

addPropertyControls(Button, {
  label: { type: ControlType.String, title: 'Label', defaultValue: 'Click me' },
  bg: { type: ControlType.Color, title: 'Background', defaultValue: '#007AFF' },
  color: { type: ControlType.Color, title: 'Text', defaultValue: '#ffffff' },
  shadow: {
    type: ControlType.BoxShadow,
    title: 'Shadow',
    defaultValue: '0 4px 12px rgba(0,0,0,0.1)',
  },
  // @ts-ignore
  font: {
    // Extended Font control
    type: ControlType.Font,
    title: 'Font',
    controls: 'extended',
    displayFontSize: true,
    displayTextAlignment: false,
    defaultValue: {
      fontFamily: 'Inter',
      fontSize: 16,
      lineHeight: 24,
      fontWeight: 500,
    },
  },
})