import { inject, provide, ref } from 'vue'

export type Column = {
  prop: string
  label: string
  width?: string
  align?: 'left' | 'center' | 'right'
  slot?: any
}

type TableContext = {
  columns: ReturnType<typeof ref<Column[]>>
  addColumn: (column: Column) => void
}

const key = Symbol('table')

export function useTable() {
  const columns = ref<Column[]>([])

  const addColumn = (column: Column) => {
    columns.value.push(column)
  }

  provide(key, {
    columns,
    addColumn,
  } as TableContext)

  return {
    columns,
  }
}

export function useTableInject() {
  const table = inject<TableContext>(key)
  if (!table) {
    throw new Error('useTable must be used within Table component')
  }
  return table
}