import { computed } from "vue";
import { convertToUnit } from "../utils/helpers";

const predefinedSizes = ["xs", "sm", "md", "lg", "xl"];

export const useSizeProps = {
  size: {
    type: [String, Number],
    default: "md",
  },
};

export default function (props:any, sizes = predefinedSizes) {
  const sizeableClasses = computed(() =>
    sizes.includes(props.size) ? [`nv-size--${props.size}`] : []
  );

  const customSize = computed(() =>
    !sizes.includes(props.size) ? convertToUnit(props.size) : undefined
  );

  return {
    sizeableClasses,
    customSize,
  };
}