import { NButton, NSelect } from 'naive-ui'
import useCodeEditor from '../hooks/codeEditor'
import { useRoute } from 'vue-router'
const options = [
  {
    label: 'static',
    value: 'static',
  },
  {
    label: 'vanilla',
    value: 'vanilla',
  },
  {
    label: 'vue3',
    value: 'vite-vue',
  },
  {
    label: 'react',
    value: 'react',
  },
]

export default defineComponent({
  setup() {
    const { template, saveCode } = useCodeEditor()
    const { query } = useRoute()

    // const type = ref('static')
    return () => (
      <div class="flex gap-2 h-[64px] justify-center items-center bg-white border border-[var(--border-color)] rounded-lg p-5">
        <NSelect class="w-[200px]" options={options} v-model:value={template.value}></NSelect>
        <NButton type="primary" class="">
          运行
        </NButton>
        <NButton type="primary" class="ml-auto" onClick={() => saveCode(query)}>
          保存
        </NButton>
      </div>
    )
  },
})